在HTML / CSS中使用自定义字体

Question

我在Mac上使用Atom编辑器并遇到问题。我需要把＃34; Typogrotesk＆＃34;我的网站中的字体。我一直试图这样做，但没有运气。我已经尝试使用它作为我的CSS代码，但没有运气：

h1 {
font-family: "Typogrotesk";
font-size: 300%;
color: white

Answer 1

制作字体：

@font-face {
    font-family: 'Typogrotesk'; /*a name to be used later*/
    src: url('TheURLToTheFontFile'); /*URL to font*/
}

然后在你的CSS样式中使用它：

.example {
    font-family: 'Typogrotesk';
}

信用：this link

的@Chris

Answer 2

这应该有效：

@font-face {
    font-family: "Typogrotesk";
    src: url(yourfontfile);
}

将它放入CSS中以导入字体。您应该能够在其他地方使用该字体。

如果这不起作用，您可能需要在单引号或双引号中尝试yourfontfile。

Answer 3

在此处下载：http://www.dafont.com/de/typo-grotesk.font

将其上传到网站空间上的文件夹。例如：“styles / fonts”

在style.css的顶部添加以下代码：

@font-face {
    font-family: "Typogrotesk";
    src: url(fonts/typogrotesk.ttf);
}

之后，为单个元素

定义它

.yourclass {
font-family: 'Typogrotesk';
}

或者为所有元素定义

* {
font-family: 'Typogrotesk';
}