Support » Plugin: Autoptimize » Local Google Fonts loading

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Frank Goossens

    (@futtta)

    well, you have the critical CSS box when “inline&defer” is checked, no? 🙂

    net

    (@krstarica)

    Yes, but criticalcss.com doesn’t generate CSS for local Google Fonts. It doesn’t even have a clue that we’ve disabled them.

    So we need to append it manually for every Critical CSS rule.

    Since plugin has disabling Google Fonts option, it’s logical to add box for CSS when using them locally. Actually this has nothing to do with Critical CSS 🙂

    Duplicate

    You can also add those inline using Per Page Add to Head Ivan, thereby bypassing AO’s Critical CSS feature.

    You’ll need tags though, something like:

    <style id="Ivans-fonts">@font-face{font-family:Lato;font-style:normal;font-weight:300;src:url(wp-content/fonts/lato-v11-latin_latin-ext-300.eot);src:local('Lato Light'),local('Lato-Light'),url(wp-content/fonts/lato-v11-latin_latin-ext-300.eot?) format('embedded-opentype'),url(wp-content/fonts/lato-v11-latin_latin-ext-300.woff2) format('woff2'),url(wp-content/fonts/lato-v11-latin_latin-ext-300.woff) format('woff'),url(wp-content/fonts/lato-v11-latin_latin-ext-300.ttf) format('truetype'),url(wp-content/fonts/lato-v11-latin_latin-ext-300.svg) format('svg')}@font-face{font-family:Lato;font-style:italic;font-weight:300;src:url(wp-content/fonts/lato-v11-latin_latin-ext-300italic.eot);src:local('Lato Light Italic'),local('Lato-LightItalic'),url(wp-content/fonts/lato-v11-latin_latin-ext-300italic.eot?) format('embedded-opentype'),url(wp-content/fonts/lato-v11-latin_latin-ext-300italic.woff2) format('woff2'),url(wp-content/fonts/lato-v11-latin_latin-ext-300italic.woff) format('woff'),url(wp-content/fonts/lato-v11-latin_latin-ext-300italic.ttf) format('truetype'),url(wp-content/fonts/lato-v11-latin_latin-ext-300italic.svg) format('svg')}@font-face{font-family:Lato;font-style:normal;font-weight:700;src:url(wp-content/fonts/lato-v11-latin_latin-ext-700.eot);src:local('Lato Bold'),local('Lato-Bold'),url(wp-content/fonts/lato-v11-latin_latin-ext-700.eot?) format('embedded-opentype'),url(wp-content/fonts/lato-v11-latin_latin-ext-700.woff2) format('woff2'),url(wp-content/fonts/lato-v11-latin_latin-ext-700.woff) format('woff'),url(wp-content/fonts/lato-v11-latin_latin-ext-700.ttf) format('truetype'),url(wp-content/fonts/lato-v11-latin_latin-ext-700.svg) format('svg')}@font-face{font-family:Lato;font-style:italic;font-weight:700;src:url(wp-content/fonts/lato-v11-latin_latin-ext-700italic.eot);src:local('Lato Bold Italic'),local('Lato-BoldItalic'),url(wp-content/fonts/lato-v11-latin_latin-ext-700italic.eot?) format('embedded-opentype'),url(wp-content/fonts/lato-v11-latin_latin-ext-700italic.woff2) format('woff2'),url(wp-content/fonts/lato-v11-latin_latin-ext-700italic.woff) format('woff'),url(wp-content/fonts/lato-v11-latin_latin-ext-700italic.ttf) format('truetype'),url(wp-content/fonts/lato-v11-latin_latin-ext-700italic.svg) format('svg')}</style>

    Be well,
    AJ

    net

    (@krstarica)

    Thanks AJ, those are the tags, but wanted to have everything in single plugin 🙂

    Since using Autoptimize to disable fonts, why not pasting there code right away.

    Oh i get it. I just wanted to make sure you’re aware of the option in the event that Frank doesn’t opt for your suggestion.

    One other thing about Per Page Add to Head though, for you — if you need it — and the audience:

    1.) In Per Page Add to Head’s files, find and open perpagehead.php

    2.) On line 119 (or thereabouts), you will see

    add_action('wp_head', 'perpageath_display', 1000);

    3.) Change this to

    add_action('wp_head', 'perpageath_display', 0);

    In other words, simply change the “1000” to “0”.

    This will get inlined fonts as high in the source code as possible.

    Be well,
    AJ

    net

    (@krstarica)

    Ah, so would need https://wordpress.org/plugins/code-snippets/ to add that code, too. Two plugins.

    Hopefully Frank will find this useful.

    Sorry Ivan, it seems I’ve lost you.

    You don’t need Code Snippets, just Per Page Add to Head. The ‘doctoring’ of the plugin is done directly on the plugin’s perpagehead.php file. Which — depending on the website — may or may not be necessary (but should be experimented with to find the performance sweet spot).

    Be well,
    AJ

    net

    (@krstarica)

    I did what you suggested Aj.

    I have duplicate font CSS on pages now.

    One comes from “Per Page Add to Head” plugin, the other from Critical CSS.

    I suppose there is no easy solution for this, but manually removing font CSS from Critical CSS?

    Correct Ivan.

    The Per Page Add to Head Plugin enables you to automatically add the font CSS to every page and post by adding the CSS only once, whereas with AO you have to add it for every critical CSS file added with Frank’s (totally awesome) Critical CSS Powerup.

    So if you’ve already taken the time to add it to all those critical CSS files then yes, you’ll have to manually remove the font CSS from them or you’ll just be adding page weight and redundant code.

    Be well,
    AJ

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Local Google Fonts loading’ is closed to new replies.