安装字体供离线 Intranet 网站使用答案

【问题标题】：Installing font for offline intranet website use安装字体供离线 Intranet 网站使用
【发布时间】：2015-04-27 23:22:58
【问题描述】：

我正在尝试安装一种字体，以便在开发 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 路径名问题。

【问题讨论】：

一旦您访问了该站点，它应该缓存文件以供离线使用。可能重复：stackoverflow.com/questions/15930003/…
尝试删除 wp-content 之前的 /
@dowomenfart 我看到了那个帖子，它把我带到了我现在的位置。您是指 googlefonts 网站吗？
因为您已经使用 fontsquirrel.com 完成了所有操作。你不需要谷歌字体。您是否检查以确保您的文件正在加载？您可以通过打开控制台并转到网络选项卡并查找正在加载的文件来进行检查。
@dowomenfart 我有字体的 GET 数据包。现在字体文件在主题文件中，我的 url 只是 '/font/latobold.ttf'，GET 数据包显示 GET localhost:8888/font/Lato-Bold-webfont.ttf

标签： html css wordpress fonts

【解决方案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的字体名称

我猜谷歌字体不是一个选项，正如你所说的“离线开发”。但您实际上可以从那里下载该字体。

【讨论】：