安装字体供离线内网网站使用

Question

我正在尝试安装一种字体，以便在开发 Wordpress 网站时脱机使用。这是我尝试过的，但仍然不起作用：

通过 fontsquirrel.com
将文件内容添加到 /wp-content/themes/myTheme/font
在我的 style.css 文件中，我添加了以下代码：

@font-face {
    font-family: 'latobold';
    src: url('/font/Lato-Bold-demo.eot') format('eot');
    src: url('/font/Lato-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/Lato-Bold-webfont.woff2') format('woff2'),
         url('/font/Lato-Bold-webfont.woff') format('woff'),
         url('/font/Lato-Bold-webfont.ttf') format('truetype'),
         url('/font/Lato-Bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

然后我尝试通过以下代码更改正文字体：

body {
font-family: 'latobold', sans-serif;
}

我的字体默认为其他无衬线字体。如果我删除无衬线体，它就是 Times New Roman。我想我有一个 url 路径名问题。

Answer 1

首先，您的字体文件不应位于 /wp-content/font 文件夹中。假设您的主题文件夹名为 myawesometheme.

您确实应该将 font 文件夹放在这里：

/wp-content/themes/myawesometheme/font

您的 style.css 的路径将是这样的：

/wp-content/themes/myawesometheme/style.css 里面的字体是这样的：

@font-face {
    font-family: 'latobold';
    src: url('font/Lato-Bold-demo.eot') format('eot');
    src: url('font/Lato-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Bold-webfont.woff2') format('woff2'),
         url('font/Lato-Bold-webfont.woff') format('woff'),
         url('font/Lato-Bold-webfont.ttf') format('truetype'),
         url('font/Lato-Bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

您说您生成的代码来自 fontsquirrel.com 它非常可靠。只是为了确保字体文件在上传之前可以正常工作并且没有损坏。并仔细检查 font-family

的字体名称

我猜 Google 字体不是一个选项，正如你所说 "offline developing"。但是您实际上可以从那里下载该字体。

安装字体供离线内网网站使用

Installing font for offline intranet website use

html

css

wordpress

fonts