How to Remove Google Web Fonts

Thanks for getting in touch.

Have you considered using a plugin to do it? Something like https://www.ads-software.com/plugins/disable-google-fonts/

Or am I missing the mark? Please let me know!

Thank you.

Yes, I use a plugin to disable google fonts. I do not see http requests going to fonts.googleapis.com anymore.

But Lato and Lora continue show in WhatFont browser extension tools in Firefox and Chromium. Hence trying to target these with code.

Hi there,

I think the browser extension is picking up declared font families based on the theme’s CSS, not whether there’s a HTTP request.

You can test this by adding the CSS below to the customizer in Appearance > Customize > Additional CSS, then check if the browser extension still says the Google fonts are being used:

body, button, input, select, textarea {
    font-family: serif;
}

h1, h2, h3, h4, h5, h6, .main-navigation {
    font-family: sans-serif;
}

Thank you very much for the helpful code. It works, but partially.

The CSS above removes Lato and Lora from text and title, but retains these (plus Open Sans) in Jetpack likes, share buttons, Gravatars, etc. Could you please suggest a way to remove these fonts from being referenced completely?

Edit: A sample page I need help with is https://www.backpackingseries.com/how-to-load-maps-faster-on-your-website/

Kind regards,

• This reply was modified 6 years, 1 month ago by backpackingseries. Reason: Included a sample page for reference

Thank you very much for the helpful code.

You’re welcome ??

For the Jetpack titles, please try using :

.hentry div.sd-rating h3.sd-title, .hentry div.sharedaddy h3.sd-title{
    font-family: sans-serif;
}

The “like” button and Gravatar stuff are loaded in an iframe, it’s not possible to change fonts inside an iframe with CSS.

If there are other areas where you’d like to change the font, please temporarily disable Autoptimize, and let me know where the text is you’d like to change.

I hope this helps ??

Great! Works like a charm! ??

So far, I have the following CSS:

/* Disable Google Fonts from Gazette Theme */
body, button, input, select, textarea {
    font-family: serif;
}
h1, h2, h3, h4, h5, h6, .main-navigation {
    font-family: sans-serif;
}
/* Disable Google Fonts from Jetpack Titles */
.hentry div.sd-rating h3.sd-title, .hentry div.sharedaddy h3.sd-title{
    font-family: sans-serif;
}

If I may be a bit greedy here? I have three more areas to seek similar support on. These are plugins at work here.

For instance,
1. On the same page: https://www.backpackingseries.com/how-to-load-maps-faster-on-your-website/ just above the Jetpack share titles, there’s a DigiProve Copyrights notice using Tahoma, MS Font.
2. Besides, a plugin to list contributors and reviewers uses Open Sans. Here are the two links: Dorm of Fame and The Rave Terminal.

I realize CSS can do magic and wonder, instead of adding multiple snippets, whether there’s a way to override all other fonts (from anywhere it may come) with Web Safe Fonts site-wide with a single piece of CSS code?

Kind regards,

Please temporarily disable Autoptimize if you can.

It’s doing some odd things to the order CSS is loaded, which makes it difficult to troubleshoot CSS.

Thank you and I have now disabled AutOptimize and purged the cache from CloudFlare and also the server.

Look forward to your advice.

Kind regards,

Some of the previous CSS rules can be combined to make things a bit cleaner. This should also target the copyright notice on the page you linked to. Please try replacing the previous CSS with this:

body, button, input, select, textarea {
    font-family: serif;
}

h1, h2, h3, h4, h5, h6, .main-navigation,
hentry div.sd-rating h3.sd-title, .hentry div.sharedaddy h3.sd-title,
#dprv_cp-v3.08 {
    font-family: sans-serif;
}

As the Open Sans text is coming from a premium third-party plugin, I’d recommend contacting the developer if you need support for it- premium plugin vendors are responsible for supporting their own commercial products.

https://codecanyon.net/item/ultimate-author-box-responsive-postarticle-author-section-plugin-for-wordpress/19566843

Thank you once again.

This time, the CSS editor under Appearance throws few errors.

Errors messages like the following:
1. Expected LBRACE
2. Unexpected Token
3. Expected a FUNCTION or IDENT

Should I go ahead and save the new code or do you think it might need tweaks?

Kind regards,

Please temporarily disable Autoptimize if you can.

for future reference: you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

hope this helps debugging,
frank (ao dev)

The copyright section has an id with a period in the site’s HTML, which is very odd:

div id="dprv_cp-v3.08"

That’s causing the error in the customizer when it’s targeted with CSS, so it needs to be escaped.

Please use this CSS instead:

body, button, input, select, textarea {
    font-family: serif;
}

h1, h2, h3, h4, h5, h6, .main-navigation,
hentry div.sd-rating h3.sd-title, .hentry div.sharedaddy h3.sd-title,
#dprv_cp-v3\.08 span, 
#dprv_cp-v3\.08 a {
    font-family: sans-serif !important;
}

Thank you very much for the kind support.

The code above works magic to remove all references to Google Web Fonts from WhatFont kind of browser extension tools. As advised, I will seek support from premium plugin authors for their part.

Also, I guess, with this CSS applied (and the AO plugin to remove Google Web Fonts), the WP referred in my original message is redundant and can be removed?

function gazette_dequeue_googlefonts()
{
	wp_dequeue_style( 'gazette-lora' );
	wp_dequeue_style( 'gazette-lato-inconsolata' );
}
	add_action( 'wp_enqueue_scripts', 'gazette_dequeue_googlefonts', 100 );

Really appreciate this.

Kind regards,

• This reply was modified 6 years, 1 month ago by backpackingseries.

Really appreciate this.

You’re welcome ??

I’d keep that function.

It still prevents a user’s browser from downloading unnecessary font files.

Oh okay! I thought otherwise (as an either or scenario) and removed it – especially since AutOptimize is also disabling Google Web Fonts.

Will revert the change, in that case, to include the code above.

Also, I wrote a small piece sharing my experience of removing Web Fonts. If its alright, I’ll include the advice from this thread and link back.