CODEWITHSUNDEEP
performancewebfontsgoogle-webfontsgoogle-font-api
javy
javy

Reputation: 275

Performance considerations of link/@import/js method of using Google Fonts

When using Google Fonts there are 3 methods which one can use to include them into a site, those 3 being <link>, @import and javascript.

I'd like to know what considerations one should have when determining which method is the most appropriate and also how the fonts may be affected using one vs the other. Such as:

I'm making the assumption that one has the ability to use any method without restriction. Thanks

Upvotes: 4

Views: 2060

Answers (1)

Ryan Male
Ryan Male

Reputation: 11

The link method allows you to combine multiple font requests in one call like so:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">

This simple trick saves roundtrips to the Google server. Furthermore, put your 'link' call before any JS calls on your page.

Unfortunately, Internet Explorer has bad performance when one external CSS file links to another using an @import directive. If it weren't for performance issues, it would be good to have the extra flexibility of putting the @import in the same CSS file that uses the fonts, but for best performance, put the 'link' tag in the base HTML file.

Upvotes: 1

Related Questions