註冊
WordPress優化

在WordPress網站伺服器託管Web字型的深入指南

WBOLT_COM
3k+
0

在WordPress網站伺服器託管Web字型的深入指南

在您的WordPress網站上託管和使用字型時，有很多不同的選擇。您可以在本地託管它們，也可以使用Google字型（現在大多數主題都整合了Google字型），或使用其他3rd方服務，如Adob​​e Fonts。

今天，我們想深入探討在WordPress中託管本地字型具有優勢的幾個原因。您不僅可以有更多的HTML字型選擇，而且有時也有效能優勢。檢視我們下面的深入教程，瞭解如何在本地託管您的高階字型以及來自Google字型的任何字型系列。

什麼是Web字型？

當您瀏覽某人的WordPress網站時，您會看到兩種基本字型，Web安全字型或Web字型。或者他們也可以混合使用兩者。

建議閱讀：如何在WordPress中更改字型。

  • Web安全字型是預裝在裝置或作業系統上的字型。Web安全字型的一些示例包括Arial、Times New Roman和Courier New以及通用字型系列，如serif、sans-serif（請參閱現代字型）和等寬字型。這些是您已經看到多年的字型。檢視Web安全字型的完整列表。
  • Web 字型是未預裝在裝置上的字型，必須由使用者的瀏覽器下載才能顯示。Web 字型的一些示例包括 Google 的 Open Sans 和 Roboto 字型，以及來自 Adob​​e Fonts 的流行的 Proxima Nova 字型。

Google Fonts是一個開源字型目錄，在過去幾年中得到了廣泛使用。根據BuiltWith的資料，在排名前10,000的網站中，超過45%的網站在其網站上使用Google字型。如果我們檢視Google Fonts分析，我們可以看到它們的瀏覽量超過17千萬次。這是很多！Open Sans和Roboto是他們使用最廣泛的兩個字型系列，Roboto 在過去一年中增長了77%。我們有一篇關於最佳Google字型的文章，請務必檢視：  15 種最佳Google 字型（按數字排序）。

谷歌字型統計

谷歌字型統計

本地託管字型與第3方

在我們深入學習本教程之前，重要的是要了解託管本地字型和簡單地使用3rd方服務之間的一些優缺點。在本地託管字型意味著您實際上在自己的伺服器上擁有字型檔案（和/或複製到您的CDN，您也將其用於所有其他資產）。而如果您使用第三方（例如Google Fonts或Adob​​e Fonts），則只需通過連結到外部資產來包含字型。

本地字型的優勢

1. 更廣泛的字型選擇

使用本地字型的一個巨大優勢是您可以選擇更廣泛的字型！雖然Google Fonts和Adob​​e Fonts等3rd方服務擁有龐大的庫，但它們無法與高階字型商店相比，您可以在其中購買所需的任何高階網路字型並將其託管在您的網站上。我們實際上將在下面的教程中使用高階字型，您無法從任何3rd方服務中獲得。

2. 可以更好地整合

由於字型選擇範圍更廣，在本地託管它們可能會讓您選擇一種與您的品牌更好地整合的字型，以保持整個網站的一致性。這一切都取決於您的設計需求和偏好。

3. 不必依賴第三方服務

當您在本地託管字型時，您不必依賴3rd方服務或其伺服器。眾所周知，諸如Adob​​e Fonts（以前稱為Typekit）之類的服務會出現故障，這反過來又會讓您看起來很糟糕。對WordPress網站的依賴越少越好。

4. 完全控制快取

通過使用本地字型，您可以完全控制字型檔案的快取。如果您使用Google字型或其他3rd方服務，您可能會看到錯誤或警告，指出資源缺少快取驗證器或它們需要expires headers。這些是在伺服器級別修復的，當它們在3rd方伺服器上時，您無法控制修復它們。

指定快取驗證器

指定快取驗證器

5. 更少的請求等於更快的載入時間

由於必須從第3方下載Web字型，這反過來可能會影響您網站的載入速度。您永遠不知道他們的伺服器在特定時刻的執行速度。但是，您確實可以通過WordPress主機對此進行更多控制，或者您應該這樣做！例如，Adobe Fonts新增了2個外部HTTP請求，並且它還對所有字型格式進行了base64編碼。如果您不熟悉字型，則不再需要提供所有字型格式，您只需要WOFF和WOFF2（如果您要進行額外壓縮）。

使用Google Fonts，您還有一個額外的DNS請求來查詢fonts.googleapis.com以獲取CSS檔案。然後，您可以向fonts.gstatic.com發出其他請求以下載字型檔案。當您在本地託管所有請求時，所有請求都來自同一個域，並且很可能您不需要另一個CSS檔案，因為它將在您的WordPress主題的CSS檔案中。

Google字型HTTP請求

Google字型HTTP請求

6. 單個HTTP/2連線

如果您還沒有了解HTTP/2的優勢，我們強烈建議您這樣做。通過在本地或CDN上託管您的字型，您可以利用單個HTTP/2連線來實現更好的並行性和多路複用。

本地字型的缺點

現在我們已經瞭解了本地字型的優點，但也有一些缺點需要注意。

1. 谷歌字型可能已經被快取

Google Fonts使用自己的CDN，速度很快，畢竟是Google。由於如此多的網站已經在使用Google字型，因此使用者很可能已經在瀏覽器的快取中擁有該字型。如果您使用更獨特、更優質的字型，它實際上可能會增加下載時間。例如，如果有人訪問使用Google Fonts中的Roboto字型的網站，它將下載到他們的快取中。如果他們隨後訪問您的網站，該網站也使用Roboto，則無需再次下載該字型。但是，如果您使用的是新發布的高階字型，例如Proxima Soft，則很可能需要下載，這可能會增加載入時間。

這裡的關鍵要點是，如果您打算使用一種未廣泛使用的高階字型，您可能應該指望該人的瀏覽器在他們第一次訪問您的網站時需要下載它。注意：如果您使用流行的Google字型並將其託管在本地，例如Roboto，則這不適用，因為瀏覽器足夠智慧，可以在快取中檢測到它（無論是從Google載入還是從您的站點本地載入）。

2. 更復雜

我們意識到並不是每個人都是WordPress大師。託管本地字型肯定需要更多的設定。例如，WordPress主題可能會在其主題中自動呼叫Google字型，如果您在本地託管字型，則需要找到一種方法來禁止在您的站點上呼叫它們。這可能需要與您的主題開發人員聯絡以獲得快速的程式碼行。這聽起來可能很複雜，但我們將嘗試在下面的教程中儘可能簡單地解釋它。

3. 更謹慎的字型選擇

當您託管本地字型時，您必須選擇要支援的字型型別。如果您只選擇較新的格式，例如WOFF2，您可能會忽略較舊的瀏覽器，而這些瀏覽器將預設使用舊的網路安全字型。例如，根據CanIUse的說法，IE11、Safari和某些版本的Android瀏覽器可能會在僅使用WOFF2網路字型時出現問題。因此，您可能希望使用WOFF+WOFF 2以確保全面安全。WOFF 2提供了更高的壓縮方法，這就是您想要同時使用兩者的原因。

WOFF2瀏覽器支援

WOFF2瀏覽器支援

使用 3rd 方服務時，幾乎不可能把它搞砸，因為它們考慮了開箱即用的廣泛瀏覽器支援。因此，在本地託管時，您必須更加小心您的字型型別選擇。

4. 不要沒有CDN

如今，許多站點都在使用Cloudflare或KeyCDN等CDN來加速其資產的交付。這很重要，因為它可以全面減少延遲和DNS查詢時間。如果您使用本地字型，而不使用CDN，實際上，與使用Google Fonts或Adob​​e Fonts等服務相比，您的網站速度可能會變慢。原因是所有這些服務都使用CDN來提供它們的字型。所以我們強烈建議，除非您只有一個小地理區域的流量，否則如果您託管自己的字型，請始終使用CDN。當然，請確保您使用的是支援HTTP/2的CDN提供商。

如何在WordPress中託管本地字型

現在是時候進行有趣的部分了！在WordPress中託管您的本地字型。我們在下面進行了兩種不同的選擇，一種是使用我們購買的高階字型，第二種實際上是使用 Google 字型並將其託管在本地。在本教程中，我們使用全新的WordPress安裝並安裝了2017主題。

1. 如何在本地託管高階字型

為了在本地託管高階字型，我們選擇使用Fontspring和2017年1月釋出的新Proxima Soft字型。由Mark Simonson建立的Proxima Nova Soft是原始Proxima Nova字型的更新版本。我們選擇Fontspring是因為它們不需要任何3rd方跟蹤指令碼，而且該字型是一次性購買的，可以在無限數量的網站上使用。購買字型時要非常小心，因為其中很多需要3rd方跟蹤指令碼，這在某種程度上違背了在本地託管它們的目的。

Fontspring

Fontspring

我們購買了Proxima Soft Regular和Proxima Soft Bold字型。通常，對於大多數網站來說，常規字型型別和粗體就足夠了。根據您的站點，您可能還需要斜體和半粗體。

步驟1

購買字型後，您將收到一封電子郵件，其中包含字型檔案的連結。

Proxima Soft字型下載

Proxima Soft字型下載

步驟2

每個字型版本，例如粗體和正則都有自己的字型型別，例如WOFF2、WOFF、TTF等。在這個例子中，我們將只使用粗體和粗體正則的WOFF和WOFF2版本，這確保全面的現代瀏覽器支援。

本地字型檔案

本地字型檔案

步驟3

我們獲取字型檔案並通過FTP將它們上傳到我們的WordPress站點到我們建立的名為“fonts”的資料夾中。在此示例中，我們將CDN用於我們的所有資產，以及來自KeyCDN團隊的免費CDN Enabler外掛。這個外掛會自動複製我們剛剛上傳到CDN的字型。即使我們說在本地託管它們，CDN仍在引用您的本地資產。重要的部分是您從同一位置提供所有資產，而不是引用多個域（主機）。

將字型上傳到網路伺服器

將字型上傳到網路伺服器

步驟4

您需要在WordPress網站上的CSS中引用新字型。現在很多主題都有自定義CSS面板，或者您可以使用像Simple Custom CSS and JS這樣的免費外掛。我們將插入以下程式碼，引用我們的CDN URL。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face { font-family: 'proxima_softregular'; src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'), url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'proxima_softbold'; src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'), url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

您還需要更新樣式以指向新的字型系列。這是我們在2017主題中使用的程式碼示例。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}
body {font-family: 'proxima_softregular', Arial, sans-serif;} h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}
body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}

這是來自Simple Custom CSS and JS外掛的螢幕截圖。

自定義字型CSS程式碼

自定義字型CSS程式碼

步驟5

如果您的WordPress主題已經整合了Google字型，您需要確保禁用它們。否則，您可能會同時載入本地字型和Google字型。由於我們在本教程中使用了2017主題，因此我們使用免費的Disable Google Fonts外掛。這僅適用於WordPress中的預設主題。對於大多數主題，您可能需要聯絡開發人員，他們可以快速提供禁用 Google字型的功能。或者檢查他們的文件，通常這是一個非常快速的調整。某些主題甚至可以選擇在後端開啟或關閉它們。

就是這樣！這是我們的新Proxima Soft字型載入的螢幕截圖，用於我們的正文字型和2017主題的標題。

wordpress網站上的新字型

wordpress網站上的新字型

這是我們的HTTP請求的螢幕截圖。如您所見，我們只有2個對WOFF2字型的請求，而不是我們之前顯示的Google的4個請求。我們在網站上也有WOFF字型，但由於Chrome支援WOFF2，所以改為拉取這些字型。例如，如果我們使用IE 11訪問該站點，則會載入WOFF字型。

本地託管字型的HTTP請求

本地託管字型的HTTP請求

2. 如何在本地託管Google字型

在本地託管字型的第二種方法是實際使用您在Google Fonts上已經喜歡的字型，然後將其移動到您的伺服器或CDN。眾所周知，Open Sans非常輕巧且速度超快。所以我們將在我們的例子中使用它。

步驟1

獲取Google字型的最佳方法是使用免費的google-webfonts-helper工具，我們將在本教程中使用該工具。您可能還想檢視Font Face Observer專案。您需要做的第一件事是搜尋您想要的Google字型，然後選擇樣式。我們再次選擇常規和粗體 (700) 字型樣式。

下載Open Sans網路字型

下載Open Sans網路字型

步驟2

然後你需要選擇你想要的瀏覽器支援。現代瀏覽器會給你WOFF和WOFF2字型，這正是我們想要的。最好的支援為您提供WOFF、WOFF2、EOT、TTF和SVG。如您所見，它為您提供了可以複製到剪貼簿的程式碼，以及包含字型的下載zip。

現代瀏覽器中字型的CSS

現代瀏覽器中字型的CSS

其餘的說明與我們上面的高階字型示例非常相似。

步驟3

我們獲取字型檔案並通過FTP將它們上傳到我們的WordPress站點到我們建立的名為“fonts”的資料夾中。在此示例中，我們將CDN用於我們的所有資產，以及來自KeyCDN團隊的免費CDN Enabler外掛。這個外掛會自動複製我們剛剛上傳到CDN的字型。即使我們說在本地託管它們，CDN仍在引用您的本地資源。重要的部分是您從同一位置提供所有資源，而不是引用多個域（主機）。

將Google字型上傳到網路伺服器

將Google字型上傳到網路伺服器

步驟4

您需要在WordPress網站上的CSS中引用新字型。現在很多主題都有自定義CSS面板，或者您可以使用像Simple Custom CSS and JS這樣的免費外掛。我們將插入以下程式碼，引用我們的CDN URL。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

您還需要更新樣式以指向新的字型系列。這是我們在2017主題中使用的程式碼示例。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}
body {font-family: 'Open Sans', Arial, sans-serif;} h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}
body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}

這是來自Simple Custom CSS and JS外掛的螢幕截圖。

本地託管的Open Sans字型的CSS

本地託管的Open Sans字型的CSS

步驟5

如果您的WordPress主題已經整合了Google字型，您需要確保禁用它們。這似乎有點諷刺，因為我們使用的是Google字型。但您需要這樣做的原因是禁用外部請求。由於我們在本教程中使用了2017主題，因此我們使用免費的Disable Google Fonts外掛。這僅適用於WordPress中的預設主題。對於大多數主題，您可能需要聯絡開發人員，他們可以快速提供禁用 Google 字型的功能。或者檢查他們的文件，通常這是一個非常快速的調整。某些主題甚至可以選擇在後端開啟或關閉它們。

就是這樣！這是我們為2017主題的正文字型和標題載入的新Google Open Sans字型的螢幕截圖。

本地託管的Open Sans字型示例

本地託管的Open Sans字型示例

這是我們請求的螢幕截圖。如您所見，我們只有2個對WOFF2字型的請求，而不是我們之前顯示的Google的4個請求。我們在網站上也有WOFF字型，但由 Chrome支援WOFF2，所以改為拉取這些字型。例如，如果我們使用IE 11訪問該站點，則會載入WOFF字型。

開啟Sans HTTP請求

開啟Sans HTTP請求

小結

就是這樣！您現在知道如何從高階字型商店託管本地字型或將Google字型移動到您自己的伺服器和/或CDN。所以現在你可以去看看那裡所有漂亮的字型，而不必擔心它們如何影響效能。他們可能只是為您的WordPress網站改頭換面（請務必閱讀我們關於WordPress字型的深入指南）！另一個很好的選擇是系統字型。

Google字型 Web字型 本地字型
評論收藏微海報
分享
分享到

相關的

評論留言

馬上學習

文章目錄

  • 什麼是Web字型？
  • 本地託管字型與第3方
  • 本地字型的優勢
  • 本地字型的缺點
  • 如何在WordPress中託管本地字型
  • 1. 如何在本地託管高階字型
  • 2. 如何在本地託管Google字型
  • 小結