无法让谷歌字体与样式组件和 ReactJS 一起使用答案

【问题标题】：Can't get google fonts to work with styles components and ReactJS无法让谷歌字体与样式组件和 ReactJS 一起使用
【发布时间】：2023-04-05 22:38:01
【问题描述】：

我已绑定所有内容，但在使用样式化组件时无法渲染谷歌字体。它始终显示默认的无衬线字体。我也尝试过使用其他谷歌字体，但没有成功。

在我的 header.styles.jsx 中有：

export const Title = styled.div`
  @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
  font-size: 72px;
  font-family: 'Dancing Script', sans-serif;
`;

这是我尝试使用它的地方：

import { Title } from './header.styles';

const Header = ({ hidden }) => {
    return (
        <sc.HeaderContainer>
            <sc.LogoContainer to={'/'}>
                <Logo className={'logo'} />
            </sc.LogoContainer>
            <Title>
                My Title Here
            </Title>
            <sc.OptionsContainer style={{ paddingRight: '80px' }}>
                <sc.OptionLink to={'/shop'}>SHOP</sc.OptionLink>
                <sc.OptionLink to={'/contact'}>CONTACT</sc.OptionLink>
                <UserMenu />
                <CartIcon />
            </sc.OptionsContainer>
            {hidden ? null : <CartDropdownContainer />}
        </sc.HeaderContainer>
    );
};

【问题讨论】：

标签： css reactjs fonts styled-components google-fonts

【解决方案1】：

我建议你在index.html 中设置一个链接标签来导入字体，或者如下： https://pt.stackoverflow.com/questions/428287/como-utilizar-fontes-customizadas-no-react

【讨论】：