分享笔记:

WordPress添加自定义字体

字体在网站中是个很重要的元素,如果自带的字体满足不了你,该怎么上传自定义的呢?

文章目录

在做一个网站时,最常见的情况是将其与个人项目、品牌或企业关联起来,所以使用特定的字体是需要考虑的视觉方面之一,以便企业形象也能在网站上得到体现。如果使用的字体是开源免费的,像谷歌字体,操作就会简单很多,毕竟WordPress大多数插件或主题都是自带的,不过也会有些有限制的情况出现。

系统自带的字体通常是以下几种,当使用的字体因为某些原因无法加载时,会自动使用以下一种,这个可以设置的:

  1. Arial
  2. Tahoma
  3. Verdana
  4. Helvetica
  5. Times New Roman
  6. Georgia
  7. Trebuchet MS

如果你品牌的字体并不是免费开源的,而是付费的或是自制的,这种情况该怎么上传字体到网站上呢?

哪里可以下载免费字体?

市面上提供免费字体的网站及其多,就像我刚刚提到的谷歌字体就有将近1千种不同的字体。另外一个很有名的是Dafont,不过要注意版权,有一些说是免费的其实并不是。

想要知道更多的酷炫免费商用自动可以去工具箱看看噢~

字体转换为网络友好格式

不是所有网络浏览器都支持所有自定义字体。不过凡事别慌,我们可以借助一些工具来把格式转换成对网络友好的。在此之前,我们简单过一下不同的字体格式。

1. TrueType Font (TTF)

最初由Apple和Microsoft共同开发。它以.ttf文件扩展名存储,并可在Windows和Mac操作系统上使用。通常用于打印和屏幕显示。

2. OpenType Font (OTF)

OpenType字体是由Microsoft和Adobe共同开发的,其文件扩展名为.otf。与TrueType字体相比,OpenType字体具有更多的高级排版功能和字形变体支持。

3. Web Open Font Format (WOFF)

WOFF是一种专门用于网络的字体格式,使用.woff文件扩展名。允许字体压缩和嵌入,使得字体加载速度更快,并且更适合于在Web页面上使用。

4. Web Open Font Format 2 (WOFF2)

WOFF2是WOFF格式的进化版本,提供更高的压缩率和更好的性能。它使用.woff2文件扩展名。相比于WOFF有更小的文件大小,因此可以更快地加载字体,对于移动设备和低带宽环境尤其有用。

5. Embedded OpenType (EOT)

Embedded OpenType是由Microsoft开发的一种字体格式,主要用于Internet Explorer浏览器。在现代网络环境中已不再普遍使用,但在过去的IE版本中,它是用于嵌入字体的常见格式。

网站最佳字体格式是WOFF和WOFF2,我们可以通过webfont generator这个工具来转换。下载完成后是一个压缩包,里面会有WOFF和WOFF2两个格式。

wordpress上传自定义字体
Webfont generator

上传自定义字体到网站

到了这笔记的重点了,我们可以分为两种上传方式:手动和通过插件

手动上传自定义字体

如果你不想通过插件来给WordPress增加负担,你可以通过手动的方式来添加字体。

  1. 准备好你要上传的WOFF格式字体(别的格式其实也行,就是建议WOFF或WOFF2)
  2. 使用FTP客户端,像FileZilla,或者你的托管提供商的文件管理器将字体上传。字体应该上传到以下位置:wp-content/themes/your-theme/fonts。如果你的主题中没有名为”fonts”的文件夹,你新建一个就可以了。
  3. 上传了之后需要登录到WordPress后台,通过代码插件或者去到外观 > 编辑选中style.css文件,添加以下代码:
@font-face {
    font-family: '这里写字体名字'; /* 替换成你的字体名称 */
    src: url('fonts/YourFontFileName.ttf') ; /* 替换成你的字体文件路径和格式 */
    font-weight: normal;
    font-style: normal;
}

上传之后你只需要编辑时,给想要的内容选择这个刚刚上传的字体就可以了。

通过插件上传自定义字体

通过插件上传自定义字体是最简单,最快的方法。插件这方面的话有很多,像Custom fontsuse any fontgoogle fonts typography… 

插件上传的方式就不多说了,也没什么可说的,就是下个插件上传个字体就行了。

wordpress上传自定义字体

为笔记评分

平均评分 5 / 5. 摘星者: 2

有疑问?留个言吧!

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors