@font-face 没有在所有浏览器上显示正确的字体 [重复]答案

【问题标题】：@font-face not displaying correct font on all browsers [duplicate]@font-face 没有在所有浏览器上显示正确的字体 [重复]
【发布时间】：2015-10-12 04:40:30
【问题描述】：

我最近使用 Esteem 主题开发了一个 Wordpress 网站。在我的网站上，我使用了一种名为 GeosansLight 的自定义字体，为了使用这种字体，我使用了 @font-face css 技巧。

但是，正确的字体似乎只显示在 Safari 上。当您在 Chrome、Firefox 或 IE 上查看该网站时，字体不正确。

请有人帮忙，因为该网站非常基于该字体。

这是我的 css 中调用 @font-face 并将该字体分配给我的各种元素的部分：

@font-face {
font-family: 'geosanslight';
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf') format('truetype');
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.svg') format('svg');
}

body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: "geosanslight", sans-serif !important;
}

提前致谢。

【问题讨论】：

这个问题已经在这里回答了stackoverflow.com/a/31543364/1716437
@Zaq Mughal 请避免重复您自己的问题 - 回到您原来的问题并回答我们向您提出的问题，以便我们提供帮助。

标签： css wordpress browser fonts font-face

【解决方案1】：

您缺少很多font-face 的字体类型，而其他浏览器不需要svg 或truetype。

把你的字体带到Webfont Generator

这将生成您网站所需的一切，包括 css 和所有字体文件。

如果您将 css 放在主题根目录中的主 style.css 中，也适用于您的根目录，那么您只需要：src: url('fonts/geosanslight-webfont.ttf')

【讨论】：