Menu
(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.
445
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 #2
style1.css is loaded using the <link> tag and style2.css is loaded using @import rule:
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.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
