html - Google Fonts in <head> or in CSS with @import? -
(i'm sorta new here if isn't place ask it, please tell me)
normally add <link href='http://fonts.googleapis.com/css?family=open+sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'> <head> of page. several pages, there chance inconsistency/error plus updating every page can headache.
can instead use @import url(http://fonts.googleapis.com/css?family=open+sans); @ first line of main css file?
advantage updating 1 css file rather updating every single page it's in <head>. i've read answers there may resource loading problem...but discussion 3 years ago. can't find current answer addressing this.
edit
avoid thinking duplicate, asking better method 2015. not asking how add google fonts site under either method.
if use @import rule in css, browser can't dowload referred script in parallel, because carrying script has parsed before doing downloads!
example #1
style1.css , style2.css loaded using <link> tag:

example #2
style1.css loaded using <link> tag , style2.css loaded using @import rule:

to enable parallel downloading, use <link> html tag instead.
alternatively, can inline css without using @import rule @ all; stylesheet preprocessors can (e.g. sass). can try node.js task runners (gulp, grunt) automate such tasks.
Comments
Post a Comment