Update typography to match Calypso. #307
Conversation
| @@ -3,7 +3,7 @@ | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> | |||
| <link href="https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css"> | |||
| <link href="https://s1.wp.com/i/fonts/merriweather/merriweather.css?v=20160212" rel="stylesheet" type="text/css"> | |||
There was a problem hiding this comment.
Currently linked fonts can only be hosted at fast.fonts.net or fonts.googleapis.com so we'll have to use @font-face instead.
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#custom-fonts
| @@ -1,3 +1,5 @@ | |||
| @import "https://s1.wp.com/i/fonts/merriweather/merriweather.css?v=20160212"; | |||
There was a problem hiding this comment.
Thanks for looking @mjangda -- can we link to the fonts using an @import like this? If not, I can include the actual @font-face rules from merriweather.css here.
There was a problem hiding this comment.
Sadly @import is a no-go with AMP too:
AMP validation had errors.
CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@import'.
| font-weight:700; | ||
| font-style:italic; | ||
| } | ||
|
|
There was a problem hiding this comment.
Thanks again @mjangda -- I've included all the @font-face rules from merriweather.css, except for the EOT font included for older versions of Internet Explorer, which I assumed that AMP pages probably don't need. Will this work?
|
Beautiful! Thanks @mattmiklic! |
Update typography to match Calypso.
This PR makes two changes:
Before:
After:
