All geek questions in one place

Features of using the link / @ import / js method to use Google Fonts

When using Google Fonts, there are 3 methods that you can use to include them in the site, and these 3 are <link>, @importand javascript.

I would like to know what considerations need to be considered when deciding which method is the most suitable, as well as how fonts can influence using one and the other. For instance:

  • Added data size
  • Font Differences
  • Page Download Speed
  • Parallel loading

I assume that you have the ability to use any method without restrictions. Thanks

+4
source share
1 answer

The link method allows you to combine several font requests with one call:

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

This simple trick saves callbacks on a Google server. Also, put your “link” call before any JS calls on your page.

Unfortunately, Internet Explorer has poor performance when one external CSS file is referenced by another using the @import directive. If it weren’t for performance issues, it would be nice to have the extra flexibility of placing @import in the same CSS file that uses fonts, but for best performance put the “link” tag in the base HTML file.

+1
source

Source: https://habr.com/ru/post/1540849/

More articles:


All Articles