DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Disable Open Sans Google Font on Frontend

Posted by Updated on

Working on the 2020 theme for my book, WordPress Themes In Depth, I noticed that WordPress was including a stylesheet from the Google API. Closer examination revealed that the styles were adding the Open Sans font via Google Fonts. The font itself is great, but I could not figure out where/how/why it was being added to the markup. This quick post explains what was happening and how to disable it.

The stylesheet markup

Here is what the stylesheet markup looks like:

<link rel='stylesheet' id='open-sans-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.5-alpha-36605' type='text/css' media='all' />

After some quick troubleshooting steps, I discovered the following information:

  • The stylesheet was not being added because of the active theme
  • The stylesheet was not being added because of any active plugin
  • The stylesheet was included on every frontend page
  • The stylesheet was included on every backend page

That last observation is what helped to figure out what was happening.. the only thing that the frontend and backend usually have in common is the WP Toolbar.

It turns out that WordPress automatically includes the Open Sans stylesheet whenever the Toolbar is enabled. On the backend that's pretty much always. And on the frontend, the Toolbar is displayed when the following setting is enabled:

Users > Your Profile > Toolbar > Show Toolbar when viewing site

Normally including the Open Sans font is just fine. But in this particular instance I was testing various fallback fonts for the 2020 theme and needed to disable Open Sans temporarily on the front-end.

Thus the moral of the story: to disable the WordPress-included Open Sans stylesheet, simply disable the display of the WP Toolbar on the frontend. Here is what to look for in the User Profile settings:

WP User Profile Setting - Disable Toolbar

Update: There also are plugins that can be used to disable WP Open Sans font, check the WP Plugin Directory for some options.

7 Responses

  1. Great discovery!

    Normally including the Open Sans font is just fine.

    Actually in some cases it is not. In countries where Google is blocked loading anything from Google (fonts, scripts, you name it) slows down the loading of the website.

    I find it incredible bad practice (by WordPress) to potentially ignore more than 20% of the world’s population and simply including all these scripts loading from Google.

  2. I usually add the following to the end of my local wp-config.php to remove the remote Google Fonts Open Sans request.

    add_action( 'admin_enqueue_scripts', function() { wp_deregister_style( 'open-sans' ); wp_register_style( 'open-sans', 'no-open-sans.css', array(), null ); }, 1, 0 );

    • Or you can swap admin_enqueue_scripts for enqueue_scripts to do the same with the front-end.

    • Jeff Starr

      Nice little tip, can also be added to functions.php via theme template. Thanks for sharing.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry