Support » Plugin: Autoptimize » Google Fonts support

  • Resolved Mark Puts

    (@mark-puts)


    Hello,

    First of all, great plugin!

    Will there be Google fonts support in the future? I now include the google font’s like this: wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,600|Varela+Round' ); Is it possible to add this css to the combined and minified by this plugin file?

    Thank you!

    https://wordpress.org/plugins/autoptimize/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Ramanan

    (@superpoincare)

    I don’t think Google would like if someone hosts their fonts on their servers.

    Also instead of loading the files like this which loads them synchronously, you could use Javascript which loads it async.

    But the fonts aren’t hosted on my own server? If you have a look at http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,600|Varela+Round you see that the file contains just some boring css and the actual fonts are loaded via it’s uri’s. So you are not hosting the actual fonts yourselves. I’ve seen other plugins that include external css files in their combined and minified version and that doesn’t cause issues for these simple files.

    Ramanan

    (@superpoincare)

    No, check the 6th line. It’s loading it from http://fonts.gstatic.com/

    Also as far as speed is concerned, it’s better to let it load from Google as it’s on a CDN and will be difficult to beat Google’s speed, unless one is NYTimes or something.

    Plugin Author Frank Goossens

    (@futtta)

    interesting topic πŸ™‚

    I actually did some research, and the basic problem is that Google servers different CSS to different browsers, e.g. for my good ole Firefox on Ubuntu Linux I get (snippet);

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }

    whereas the exact same request with an MSIE7 useragent gives (again, extract);

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
    }

    So although theoretically it would be possible to have AO cache remote JS/CSS (such as Google Font’s) and include it in the aggregated CSS- or JS-file (and that way removing render blocking resources), the problem is that AO will never be able to apply whatever logic the 3rd party applies when getting requests. Hence the design decision (made by Turl, a long long time ago) not to aggregate & minify external resources.

    I think I’ll copy/past the above in a blogpost actually, this is a recurring question and the answer is pretty interesting πŸ™‚

    Have fun you guys!

    Groetjes,
    frank

    Ramanan

    (@superpoincare)

    Hi Frank,

    Yes Google does browser sniffing and loads different files for different browsers.

    Some browsers have WOFF2 support, so WOFF2 is loaded. Recent old versions of modern browsers only have WOFF support.

    Old IE browsers don’t support woff, so eot file for them.

    http://caniuse.com/#feat=woff2

    http://caniuse.com/#search=woff

    Ramanan

    (@superpoincare)

    Also, users seem to be worried about their Google PageSpeed. And Google fonts themselves create problems for them.

    The best way to load Google Fonts is using this:

    https://github.com/typekit/webfontloader

    I didn’t knew about the different versions for different browsers, so it isn’t a good idea to combine it indeed. πŸ™‚ I was trying to avoid using it via javascript, since CSS only solution is less work haha.

    But let’s assume it was a good idea, will it really be faster to use Google’s CDN? it’s a new request with perhaps a DNS lookup, TTFB and a download time. I think it would be faster to just add some extra kb’s to 1 file? Less overhead? I’m only targeting 1 country and my server is in that country’s capital so there should be that much a difference I guess?

    Ramanan

    (@superpoincare)

    Look at the positives Mark. Less load on your server, Google’s server is going to be fast once the DNS has been looked up, user may already have the fonts in their cache even on their first visit, since Open Sans is a popular font etc.

    Also consider this: suppose your css changes. Then if you merge your css with fonts’ css, the combined minified CSS file also changes and has to be redownloaded by the user.

    True πŸ™‚ But I meant it only theoretically πŸ™‚

    Plugin Author Frank Goossens

    (@futtta)

    In theory (as in; if Google Fonts’ CSS didn’t change based on browser+version) it would be better to aggregate the Google CSS into the Autoptimized CSS, as that way the CSS would be loaded as part of the bigger autoptimized CSS file instead of having to do a new request to a new domain.

    But reality trumps theory, so … πŸ™‚

    frank

    Haha thank you for your reply. En uiteraard ook bedankt voor deze coole plugin πŸ™‚

    Hi folks,

    The by-far-and-away fastest scenario is to host your typography locally and inline, right in the CSS, the links to the various formats you need.

    The easiest way to do this is to open the font file provided by google (e.g. https://fonts.googleapis.com/css?family=Open+Sans:400,700) to see exactly what you need to get a copy of.

    Then, go to Google Webfonts Helper, get what you need from there, upload it to your server, create a CSS file, enqueue that CSS file; and, lastly, inline that file with Autoptimize.

    VoilΓ .

    Regardless of the browser, it will only download the format it needs to render the font, not all of them. No more render blocking Google fonts. As such, significantly faster font application, everywhere and at all times, in almost every conceivable scenario even on shared hosting and with no CDN.

    See how we’re doing it.

    Best,
    AJ

    As i wrote on Frank’s blog:

    “How we’ve been tackling cases like this:

    We dequeue the theme’s fonts stylesheet and then selectively add only the needed fonts using Google Font Loader javascript (the one you find on Google Fonts website). This way, AO gets the script, minifies it and concatenates. Thus, making the font loading assyncronous.

    For those worrying about FOUT (Flash of Unstyled Text): if the website is optimized, FOUT happens really fast and is not a real concern.

    Maybe this logic could be implemented on AO in the future?”

    The code we used on functions.php :

    <?php
    	// Adds Google Web Font Loader
    	add_action( 'wp_head', 'aa_clinic2a_webfont_loader',0 );
    	function c2a_clinic2a_webfont_loader () { ?>
    	<!-- Google Webfont Loader Starts -->
    	<script type="text/javascript">
    		WebFontConfig = {
    			google: { families: [ 'Poppins:400,500,600,300:latin' ] }
    		};
    		(function() {
    			var wf = document.createElement('script');
    			wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    			'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    			wf.type = 'text/javascript';
    			wf.async = 'true';
    			var s = document.getElementsByTagName('script')[0];
    			s.parentNode.insertBefore(wf, s);
    		})();
    	</script>
    	<!-- Google Webfont Loader Ends -->
    	<?php };

    (A live example is on http://www.cassiovasconcellos.com.br)

    Plugin Author Frank Goossens

    (@futtta)

    interesting thoughts friends, interesting thoughts πŸ™‚

    frank

    After reading Celso’s post I realized a not-so-obvious step I omitted from the in-lining method I posted… one must dequeue Google Fonts lol. πŸ˜€

    Easy: https://wordpress.org/plugins/remove-google-fonts-references/

    For those not comfortable messing about in their functions.php, the method Celso describes is essentially replicated with the Google Webfont Optimizer plugin.

    To leave the font loader in the location in the source it would ‘naturally’ be, put WebFontConfig in the “Exclude scripts from Autoptimize” field in AO. Otherwise, AO will aggregate and defer it too, thereby greatly increasing the time it takes for the font to be applied (much more pronounced FOUT).

    Best,
    AJ

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Google Fonts support’ is closed to new replies.