Header fonts rendered thicker when logged out?

Hey Elliott,

The Root of the Problem

Thanks for you help! It seems that, when one is logged out of WP, the following line disappears from the source (it actually adds support for a 300 font weight):

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

I think this is something that needs to be fixed in Enfold’s core code (Enfold shouldn’t remove the above line for non-logged users) :) Because when this line disappears, the lowest supported Open Sans font weight is, as you mentioned, 400 (instead of 300). Seems more Enfold users have this issue and one user has added the line manually to header.php.

Solution #1 of 2

Fixes headers, but not text size issue of text between <em> tags:

However, I re-read the topic I mentioned earlier and a solution is actually given by @Josue.

Since you pointed out that Open Sans does not support a font weight of 100, I modified Josue’s function to reflect this (as Josue’s original function also calls the non-existent 100 font weight). Here’s the working result, calling all font weights supported by Open Sans:

Please Note: after adding the function below to functions.php, Open Sans has to be re-saved as Enfold’s default font. Otherwise the function will not work! So please complete the following steps:

1 – Add the following function to functions.php:

function add_open_sans_full($fonts) {
	$fonts['Open Sans'] = 'Open Sans:300,400,600,700,800';
	return $fonts;
}
add_filter('avf_google_heading_font', 'add_open_sans_full');
add_filter('avf_google_content_font', 'add_open_sans_full');

2 – Go to WP Admin > Enfold Settings > General Styling > Fonts;
3 – Select Open Sans in the 2 drop down menus (Heading Font & Defines the Font for your body text);
4 – Save Enfold’s settings;
5 – Reload your website in your browser.

The font weights (e.g. 300) should now work for both logged in and non-logged in users.

The Details re Solution #1/2 / Function #1/2

The function does not add:

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

Instead it expands:

<!-- google webfont font replacement -->
<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Open+Sans:400,600' type='text/css' media='all'/>

To:

<!-- google webfont font replacement -->
<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' type='text/css' media='all'/>

Solution #2 of 2

Fixes headers & text size of text between <em> tags… so, logged in and logged out versions look exactly the same:

I wrote a function which checks whether the following line is in the header (the line that disappears after logging out of WP):

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

If the line is there, function does nothing. If the line is not there (e.g. when you’re logged out of WP), then the line is added.

Simply add the following function to functions.php, upload functions.php to your server and reload website in your browser (no need to re-save Enfold settings):

function add_open_sans_full() {
	if (!wp_style_is('open-sans')) {
		wp_enqueue_style('open-sans', '//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=' . get_bloginfo('version'), array(), null);
	}
}
add_action('wp_enqueue_scripts', 'add_open_sans_full');

Thanks @Elliott & @Josue!

Kind regards,

Ralph

PS: I’ll change my CSS to reflect the lowest possible Open Sans font weight (300 instead of 100).

Hey Elliott,

To answer your questions: In the Enfold settings Open Sans is set as the theme’s header & body font. That is also all I did; set the font settings. I can confirm that I’ve made no manual changes relating to Enfold’s font settings (except for the function fixing the font weight issue). Also, I’m using a LAMP setup.

However, you’re right about 400 & 600 being the default font weights, but that only seems to be the case when one is not logged in to WP. Once logged in, the id='open-sans-css' link tag line is added to the header, adding 300 to the available font weights. It seems the id='open-sans-css' line overrides the default:

<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Open+Sans:400,600' type='text/css' media='all'/>

which, as you can see, loads 400 & 600 (only when one is not logged in to WP).

UPDATE (root of the problem found!):

Instead of only searching through Enfold’s core code, I decided to code search through all of the WP files, based on the keyword “open-sans”. And I finally found out where the id='open-sans-css' link tag line is coming from! It’s added to WP’s header by wp-includes > script-loader.php. Just look for the following line in script-loader.php:

$open_sans_font_url = "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";

WP happens to use Open Sans for the Admin area and adds Open Sans (including 300) when logged in to WP.

Possible solutions to prevent future Open Sans font weight confusion/issues: Either WP has to drop 300 or Enfold has to adapt to WP and add 400, 600 and 300 as default Open Sans font weights. Just my 2 cents though.

Not sure whether this will lead to a core code fix, but it at least clears everything up :)

Kind regards,

Ralph