Disable Open Sans Google Font on Frontend
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&subset=latin%2Clatin-ext&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:
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
7 responses
-
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.
-
Jeff Starr Post AuthorYes, others have made the same point in response to my Google jQuery fallback tutorial. Google is not always available in all countries. Hopefully WordPress will implement a more optimal solution going forward.
-
You only take comments via the FB page on that site, don’t you?
-
Jeff Starr Post Author
Yeah or via my contact form. Just helps to keep things sane time-management-wise.
-
-
-
-
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_scriptsforenqueue_scriptsto do the same with the front-end. -
Jeff Starr Post Author
Nice little tip, can also be added to functions.php via theme template. Thanks for sharing.
-
