Feature Request: Typography options

[aliaghdam]

Option to change typography!

Only Google Fonts can be used and there is 850+ Google Fonts! We should list top 50 fonts in select option!

Note 1: Custom Fonts can not be used.
Note 2: Google Early Access fonts can not be used.

Please post +1 if you are interested.

[Lofesa]

AMP pages are intended for speed, google fonts, an fontsawesome, add too much time to download a page. In my test (from www.webpagetest.org) the same page with and w/o google fonts (remote font awesone from maxcdn vs. local copy) had a download average of 1.7s vs 0.5s

[aliaghdam]

Hi @Lofesa ,

Thanks for your tests but please note the Google fonts and FontAwesome will be cached in visitors browsers and a lot of sites are using Google Fonts for typography!

I think there should be options to chose fonts from Google and also options to chose safe font stacks http://www.cssfontstack.com/

[Lofesa]

Hi @aliaghdam
This is a taste issue..... For sure the better option is let the user choose, use google fonts (or wathever you choose to use in the plugin... if google let you to do so) or not to use it at all.
My choice is not to use it and use a local copy of fontawesome I had from theme i am using.
I disabled this plugin (but not uninstalled to see the progress you make on it), but this is an off-topic here

[aliaghdam]

Hi @Lofesa

Please note we can not use custom fonts from your site in AMP. The specification is clear on this!
We can use only fonts from following sources

• Typography.com: https://cloud.typography.com
• Fonts.com: https://fast.fonts.net
• Google Fonts: https://fonts.googleapis.com
• Font Awesome: https://maxcdn.bootstrapcdn.com

more info: https://www.ampproject.org/docs/reference/spec#custom-fonts

[aliaghdam]

@Lofesa

Also we found a tip to load Google Early Access fonts.

[Lofesa]

Hi @aliaghdam . Custom fonts, other than these you related, are permited using @font-face as in the document you post say

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

but testing you plugin I do that

better_amp_enqueue_style( 'font-awesome', 'https://mysiteurl/path/to/font-awesome.min.css' );
// better_amp_enqueue_style( 'google-fonts','https://fonts.googleapis.comcss?family=Lato:400,600|Roboto:300,400,500,700' );

and it worked w/o problems but don´t get validated