在使用 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

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