加载Google Web字体的7个提示更快

您的网站如何使Google字体的加载速度更快？看到未分类的字体或不同的默认字体加载，然后被您的Google网页字体替换，导致出现闪烁的无字母文本并不罕见！

这是因为当访问者访问您的网站时，浏览器会加载CSS文件中建议的默认Web安全字体（如Arial等），然后加载Google字体时，会使用Google字体替换默认字体...但是对于网页打开的初始阶段来说，它会破坏您网站的网页设计体验，并使访客感到不耐烦。所以你需要加载Web字体的速度更快，需要使用正确的方式。

比如使用Oswald字体作为标题和Open Sans字体的文章文字。看看如何加载它以获得最佳结果。

首先加载Google字体

放置Google导入代码，以便在HTML文件之后加载第一个HTML标签。这将确保字体在CSS之前加载。请记住，由于CSS文件跟随，您可以使用CSS文件中的字体对标签进行样式化。

使用链接格式

Google字体提供3种方式来加载Google网络字体 - @import，link rel和javascript。使用链接rel标签将允许您将代码放在html之上，并在CSS文件之前加载它。

@import代码需要插入到CSS文件中，虽然您可以将其添加到CSS文件的顶部，但仍可能会收到闪存的未格式文本（FOUT） - 这对您的访问者来说是一个糟糕的Web体验。

加载更少的字体

那么，为什么您需要在每个页面上显示4个Google字体。最好选择最多两种字体 - 一种粗体类型的标题和高可读性字体的文章。您选择的字体越多，加载时间越长。

组合字体代码

您可以使用单行代码加载多个Google字体。您不需要为您加载的每种字体粘贴单行代码。参见下面的例子，我们结合了Open Sans和Oswald字体。

加载默认变体

每个字体选项允许您加载各种样式的字体。您真的需要添加所有变体和多个加载次数多次。加载多个变体相当于加载多个字体。选择每种字体的默认样式，它只会加载一种变体。

例如 - 加载Open Sans字体默认选项赋予加载时间影响15

选择所有选项时，页面加载的影响会增加10倍！

加载更快的字体

每个字体的Google字体页面使得非常清楚字体需要加载多长时间。字体旁边的负载表显示每种字体的加载速度。如果您继续添加更多字体，则需要较长的时间才能加载。一些字体很重，可以占用加载时间的两倍。所以选择明智，选择加载更快的字体。例如Open Sans的页面影响为15，而Droid Sans将更多的是25！

使用Web Font Loader

对于那些只需要在加载CSS之前加载他们的Google字体，并且需要绝对确定没有无字母的文本惊喜的人，请使用网页字体加载程序 - 一个JavaScript，它将确保在网站的其余部分之前加载，并避免任何闪烁的未分类文本。虽然可以使用异步脚本，但最好使用同步脚本来确保首先加载字体。

所以尝试这些Google字体技巧，并改变您的网站设计，以获得更大的影响。