先載入Google字體，再載入CSS

將Google導入代碼放在html HEAD標籤之後，即使在載入CSS檔之前，也要先載入html HEAD標籤。這樣可以確保字體在CSS之前載入，這樣就不會在最後載入字體時出現任何意外的 “跳轉”。實際上，這在我最近看到的網站中已經很常見了。

使用連結格式

有3種方式可以載入Google Fonts的 @import、link rel和javascript。link rel標籤可以讓你將代碼放在html上，並在CSS檔之前以最快的速度載入。

下面是一個例子。
http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

@import代碼需要插入到CSS檔中，雖然你可以在CSS檔的頂部添加，但仍然可能會得到一個非styled的文本（fout）’，導致使用者體驗不佳，如上文所述。

更少的字體

你的網站真的需要6種不同的字體嗎？當然不需要。最好在設計時最多使用兩種字體 “一種粗體字用於標題，一種高可讀性字體用於正文。很明顯，你選擇的字體越多，從Google上載入的字體就越多，頁面載入速度就越慢。

組合你的字體代碼

你可以用一行代碼載入多個Google字體。這意味著你不需要為你載入的每個字體都有單獨的代碼行。請看下面的例子，我將Open Sans和Fenix字體結合在一起。

http://fonts.googleapis.com/css?family=Open+Sans|F… rel=’stylesheet’ type=’text/css’>

結論

像你的網站中的每一個其他元素一樣，保持最小化。如果您正在載入的字體載入速度較慢，請嘗試一下這些Tips，看看是否有什麼不同。根據您網站的大小，它優化的程度也會有所不同，你可以在Chrome的檢查元素功能中(F12)看到以毫秒為單位的優化，相信我，以上每一點對SEO都很重要。如果你喜歡我們的文章，請分享出去讓更多人看到。

聲明：本站所有文章，如無特殊說明或標註，均為本站原創發布。任何個人或組織，在未征得本站同意時，禁止復制、盜用、采集、發布本站內容到任何網站、書籍等各類媒體平臺。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。