Question

我最近使用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;
}

提前致谢。

Answer 1

您遗漏了font-face的许多字体类型，其他浏览器不希望svg或truetype。

将您的字体改为Webfont Generator

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

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

@ font-face在所有浏览器上都没有显示正确的字体

1 个答案: