在使用 WordPress 建站的過程中，很多時候我們希望在網頁中使用某種特定的字體，而這種特定的字體並不是主流操作系統的內置字體。在使用比較少的情況下，我們可以把想要的文字做成圖片，但是如果網頁中需要大範圍的使用該字體，做成圖片的方法就行不通了。而且如果把文字內容做成圖片不易修改，也不利於網站 SEO 。

谷歌字體是個不錯的選擇，它能夠讓字體在網頁上顯示的豐富多樣，但是國內谷歌字體 Google Fonts 所在的 googleapis.com 網站被牆，根本加載不了，而且會導致 WordPress 加載速度變慢，我們在之前的 WordPress 教程中已經講解過 WordPress 中禁用谷歌字體的方法。

在這種情況下，使用 CSS 的 @font-face 屬性在網頁中嵌入自定義字體成為最佳選擇，下面的 WordPress 教程裏，我們就向大家介紹一下 WordPress 網站中如何嵌入自定義字體。

1. 獲取要使用字體的文件格式，確保能在主流瀏覽器中都能正常顯示該字體。

  • .TTF 或.OTF 格式字體，適用於 Firefox 3.5 、 Safari 、 Opera 瀏覽器
  • .EOT 格式字體，適用於 Internet Explorer 4.0+瀏覽器
  • .SVG 格式字體，適用於 Chrome 、 IPhone 瀏覽器

通常我們在網上只能下載到一種格式的字體，我們可以使用下載的字體在下方的網站中做字體格式轉化：
http://www.fontsquirrel.com/fontface/generator

2. 在樣式表中聲明該字體

我們以 CygnetRoundRegular 字體為例，在 CSS 中加入如下代碼：

 

@font-face {

    font-family: 'CygnetRoundRegular';

    src: url('cygnetround-webfont.eot');

    src: url('cygnetround-webfont.eot?#iefix') format('embedded-opentype'),

         url('cygnetround-webfont.woff') format('woff'),

         url('cygnetround-webfont.ttf') format('truetype'),

         url('cygnetround-webfont.svg#CygnetRoundRegular') format('svg');

    font-weight: normal;

    font-style: normal;

}

 

3. 在需要調用的地方添加如下代碼 （根據具體情況進行修改）

達到的效果如下：

customfont

效果不錯吧，趕緊試一下吧。