Google Fonts in <head> or in CSS using @import?
(I am new here, if this is not the place to ask him please tell me)
I usually add <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'>
to <head>
my page. With multiple pages, there is always a chance for inconsistency / error plus refreshing each page can be a headache.
Can I instead use @import url(http://fonts.googleapis.com/css?family=Open+Sans);
on the first line of my main CSS file?
This has the advantage of updating a single CSS file rather than updating every single page where it resides in <head>
. But I have read several answers that say there might be a resource loading issue ... but this discussion was 3 years ago. Can't find the current answer by referring to this.
EDIT
To avoid this, thinking it is a duplicate, I ask which method is better for 2015. I am not asking how to add google fonts to the site under any way.
source share
If a rule is used in the CSS @import
, the browser cannot load the said script in parallel, simply because the wrapping script has to be processed before loading!
Example # 1
style1.css
and style2.css
are loaded using the tag <link>
:
Example # 2
style1.css
loaded using a tag <link>
, and style2.css
loaded using a rule @import
:
To enable parallel loading, use the <link>
html tag .
Alternatively, you can inline CSS without using a rule @import
; style preprocessors can help you with this (like Sass). You can try Node.js runners ( gulp , grunt ) to automate tasks like this.
source share
Import to css is ok, had problems a few years ago in software like IE6 (only one file was uploaded for multiple imports) but as you mentioned it is prehistoric anyway if you want to do it really well , consider using some kind of downloader like the one mentioned here , however the import is fine as long as your webpage is available online.
source share