cssfontscdngoogle-cdn

@import font VS HTML links for external CSS


I have a website which uses two fonts from the Google CDN.

The first is @imported from a Google CDN at the beginning of the main CSS file, like so:

// Start of file
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic);

html, body { height: 100%, width: 100%:
// rest of file

A second font is linked directly in HTML from a Google CDN, like so:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600" />

Can any one explain the implication of each method for performance and why one would choose one over the other?


Solution

  • General answer here; in brief, don't use import.