search

better-studio / better-amp

Full Google AMP support for WordPress with custom themes and customizations
https://betterstudio.com/wp-plugins/better-amp/
GNU General Public License v2.0
19 stars 19 forks source link

Feature Request: Typography options #14

Open aliaghdam opened 7 years ago

aliaghdam commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

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

aliaghdam commented 7 years ago

@Lofesa

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

Lofesa commented 7 years ago

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