CODEWITHSUNDEEP
cssfontswebfontsgoogle-font-apigoogle-webfonts
Borja
Borja

Reputation: 3551

What is faster (performance): @font-face or standard way (external resource) to use Google Fonts?

What is faster to use google fonts??

A

@font-face(
 font-family: "myfont";
 src: url("path-file-font-mysite.ttf");
}

B

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

I don't know which is the best way and why... But:

A: files are in my website

B: is external resource, but downloaded by server very fast (google)

I hope that you can help me. Thanks a lot and sorry for my english ;)

Upvotes: 3

Views: 2118

Answers (1)

udondan
udondan

Reputation: 59989

It depends. You can not tell one is faster than the other without looking at the details and these may vary for each visitor. Some things to keep in mind:

  • Google serves the fonts from regional servers. When you check the DNS for fonts.googleapis.com or fonts.gstatic.com you will see it resolves to a different IP depending on the location of the visitor. This in general guarantees a rather fast delivery. But that does not mean it is faster in every case. It depends on the audience of your website and where your website is hosted. If your target audience is located in Spain and your webserver is also located in Spain, it might be faster for your customers to load fonts from your own host. If you target customers on a global scale, using Googles servers would be faster in most cases.

  • Implementing fonts through Google fonts though does not only mean it is loading the font from another server. Additionally there is a CSS file that has to be loaded before. The font can only be loaded after the CSS file has been loaded. If you serve the font from your own server you probably would have the font definition in your main (and hopefully only) CSS file, saving one http request.

  • There is a max number of files a browser will download concurrently from a single server. This limit is somewhere between 2 and 8 I think, depending on the browser. If you serve a lot of files from your own server (fonts, images, a lot of icons instead of a CSS sprites) this will slow down loading of your site.

  • Another important topic, if you target customers on global scale, is China. The Great Firewall is blocking Google services including Google fonts in China. So if you potentially have Chinese customers, definitely use fonts from your own server.

Not part of your question but worth mentioning: Do NOT use TTF files alone like in your example snippet above. The CSS file Google serves is dynamic and delivers different CSS rules and font files depending on the browser. Only few browsers support TTF. Most require WOFF or WOFF2, some EOT and some (Mobile Safari) even SVG. If you want to serve fonts from your own host, make sure to use a tool like localfont.com to download all font variants and X-Browser compatible CSS.

Upvotes: 2

Related Questions