有时候你想把字体托管在本地,尤其是碰到像谷歌字体这种无法在国内访问的情况,这篇文章将介绍如何把字体托管在本地服务器上。
本文我们使用谷歌字体作为示例,操作步骤适用于其它任何类型的字体。
目录
下载我们钟意的字体
首先,下载我们需要的字体文件,谷歌字体提供了非常好用的工具 。
在左上角,搜索要下载的字体。
单击选中字体后,将跳转到一个页面,你可以在其中选择字体参数并下载文件。
当我们选择字体参数的时候,请确保仅勾选必需的参数。因为你选中的参数越多,字体文件就越大,网站页面的加载速度就会受到影响。
下一步是复制CSS样式,我们先跳过这一步,先到步骤4,步骤4是下载字体文件。
会下载一个.zip的压缩文件,我们将其解压。
上传字体文件
注意:如果你是通过FTP将文件上传到服务器,则可以跳过此步骤,只需将字体文件上传到你的主题或者子主题即可。
现在我们有了字体文件,我们需要将它们上传到我们的服务器。
默认情况下,WordPress媒体库不允许我们上传字体文件。这是考虑到一些文件的安全性问题。
但是,我们可以通过添加以下功能暂时允许上传这些文件。文件上传完成后,再删除此功能。
add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';
return $mimes;
} );
把以上代码放到主题文件的function.php中即可。
现在我们可以将字体文件上传到媒体库中了。
现在我们的文件已上传,让我们获取其中一个文件的URL 。
https://www.anspoon.com/2019/12/open-sans-v17-latin_latin-ext_vietnamese_cyrillic-ext_greek-ext_greek_cyrillic-regular.svg
现在,让我们删除文件名,并记下URL。
https://www.anspoon.com/2019/12/
使用 @font-face
好了,我们快完成了!现在我们需要在CSS中引用我们的字体。
让我们回到刚才下载字体的Google Fonts Helper网站,然后回到刚才跳过的步骤3。
在CSS中,我们将看到文件夹前缀的字段。我们将它替换成上面记下的URL,如下图。
现在,在此字段上方,复制所有的CSS,并将其添加到您的网站。
如果你使用的是WordPress,可以将其添加到自定义CSS里。
请记下css 中font-family
字段的名称,我们在下面需要用到这个名称。当然,你可以将其更改为你想使用的名称。
在CSS中引用字体
你只需要在你的网站样式文件中添加如下代码即可。
body { font-family: 'Open Sans'; }
使用浏览器的检测工具查看字体是否改变。
效果如下,Perfect!