Search code examples
htmlcssfontsgoogle-font-api

Google Fonts in <head> or in CSS with @import?

(I'm sorta new here so if this isn't the place to ask it, please tell me)

Normally I add <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'> into the <head> of my page. With several pages, there is always a chance for inconsistency/error plus updating every page can be a headache.

Can I instead just use @import url(http://fonts.googleapis.com/css?family=Open+Sans); at the first line of my main CSS file?

Advantage to this is updating one CSS file rather than updating every single page where it's in the <head>. But I've read some answers that say there may be a resource loading problem...but that discussion was 3 years ago. Can't find a current answer addressing this.

EDIT
To avoid SO from thinking this is duplicate, I am asking which is better method for 2015. I am not asking how to add Google fonts to a site under either method.

Solution

  • If you use an @import rule in CSS, browser can't dowload the referred script in parallel, simply because the carrying script has to be parsed before doing any downloads!

    Example #1

    style1.css and style2.css are loaded using the <link> tag:

    Example #1

    Example #2

    style1.css is loaded using the <link> tag and style2.css is loaded using @import rule:

    Example #2

    To enable parallel downloading, use the <link> html tag instead.

    Alternatively, you can inline CSS without using @import rule at all; stylesheet preprocessors can help you with that (e.g. Sass). You can try Node.js task runners (gulp, grunt) to automate such tasks.