Local Google Fonts loading

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

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

• This reply was modified 8 years, 2 months ago by AJ @ WpFASTER.org.

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

• This reply was modified 8 years, 2 months ago by AJ @ WpFASTER.org.
• This reply was modified 8 years, 2 months ago by AJ @ WpFASTER.org.

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

• This reply was modified 8 years, 2 months ago by AJ @ WpFASTER.org.

Ah, so would need https://www.ads-software.com/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

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