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 #1

example #2

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

example #2

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

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -