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

Question

我在Mac上使用Atom编辑器时遇到问题。 我需要在网站上放置“ Typogrotesk”字体。 我已经尝试了一段时间，但是没有运气。 我已经尝试将其用作我的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';
}

信用：@Chris在此链接

Answer 2

这应该工作：

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

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

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

Answer 3

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

将其上传到您的Webspace上的文件夹。 例如：“样式/字体”

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

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

之后，您可以为单个元素定义它

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

或者您为所有元素定义它

* {
font-family: 'Typogrotesk';
}