Question

尝试将自定义字体添加到我的wordpress网站，但它只是不起作用。我尝试使用其中一个插件，但我只在“编辑模式”中看到了字体的变化。但是当我真正进入公共网址时，字体无法加载。

我已将futura浓缩光转换成各种类型，并将其添加到我的style.css中，主题是我使用

@font-face {
    font-family: 'Conv_futura-condensedlight-normal';
    src: url('fonts/futura-condensedlight-normal.eot');
    src: url('fonts/futura-condensedlight-normal.eot?#iefix') format('embedded-opentype'),
         url('fonts/futura-condensedlight-normal.woff') format('woff'),
         url('fonts/futura-condensedlight-normal.ttf') format('truetype'),
         url('fonts/futura-condensedlight.svg#Conv_futura-condensedlight-normal') format('svg');
  font-weight: normal;
  font-style: normal;
}

并添加了此

h7{font-family: 'Conv_futura-condensedlight-normal';}

在我希望文本更改的页面上，我有：

<h7>LOGIN</h7>

但文字没有改变..

我还将文件上传到主题目录中的fonts文件夹中（其他字体在哪里）

似乎无法找到错误。帮助将不胜感激！

Answer 1

尝试@ font-face获取自定义字体。使用以下代码。

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

并将其指定如下：

font-family: 'MyWebFont', Fallback, sans-serif;

参考：https://css-tricks.com/snippets/css/using-font-face/

Answer 2

它们可能有几个原因，但我发现错误的第一件事是<h7>标签，因为它并不存在。您应该使用h1 to h6。

如果这还没有解决问题，请尝试使用浏览器的控制台，因为@ War10ck说，丢失的文件是路径问题的信号。

Answer 3

当我创建自定义字体并在我的网站上使用它时，这就是我使用的CSS：

@font-face {font-family:'CUSTOM_FONT_NAME';src:local('CUSTOM_FONT_NAME'), url(http://MY_URL/MY_FONT_PATH/MY_FONT.ttf) format('truetype');}

.my_custom_font_class {font-family:'CUSTOM_FONT_NAME',serif;}

我相信我必须使用全局路径来加载我的字体，所以你可以尝试一下。 src:local('CUSTOM_FONT_NAME')部分只是为了验证它是否已在安装了字体的计算机上正常工作。（您需要使用字体名称来匹配您在计算机中注册的名称，在这种情况下）。

在CSS / HTML中添加自定义字体？

3 个答案: