5

(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.

chris
  • 577
  • 1
  • 9
  • 23
  • 1
    Yes, if you include the `@import` in your CSS file, the font will be accessible from any page using that CSS file. – APAD1 Apr 28 '15 at 21:02
  • 1
    yes you can, here is a post for you to reference: http://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file – Dan Beaulieu Apr 28 '15 at 21:02
  • So there won't be any resource loading issues? Can't find a recent answer - everything seems to be from 2 to 3 years ago when people said there was. Like this one: http://stackoverflow.com/questions/12316501/including-google-web-fonts-link-or-import/12380004#12380004 – chris Apr 28 '15 at 21:05
  • you can bundle your css so there's only one request: http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS – Dan Beaulieu Apr 28 '15 at 21:10

2 Answers2

4

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.

Aleksej Komarov
  • 194
  • 1
  • 8
0

Import in css is all right, there were issues several years ago in software like IE6 (only one file was loaded for multiple imports), but as you mentioned this is prehistoric, anyway, if you want to do this really good consider using some loader, like mentioned here, yet, import is all right as long as your webpage will be accesed online.

Maciej Kwas
  • 6,169
  • 2
  • 27
  • 51