[Resolved] Accessing real italic styles

[NBC]

Sorry to become such a fixture around here. I’m hoping this is my last question for a while.

I added the Barlow and Barlow Condensed typeface families to the Customizer’s font list. They’re Google fonts, but they don’t show up natively in the Customizer’s list without a little help from PHP.

Both families include weights from 100 through 900, with italics for every weight. I’ve added the full lists of styles. Right now, I’m only using italics for the site tagline.

But The Customizer doesn’t do italics, and establishing font-style:italic through CSS loads fake italics.

How do I know they’re fake italics? Really simple: The shape of the lower-case “a” is different in the italic, and what I see when I use font-style is the regular “a” slanted to the right (oblique, aka fake italics). Sorry if that’s TMI, but I’ve been a typesetter for decades.

Short of hosting the font files on the site and explicitly identifying the italics as such in the required code, how do I access real italics for typeface families that include them?

(And pretty please, could we have real italics through the Customizer?)

[Leo]

Hi there,

Can you copy and paste the code you’ve added here?

Make sure to highlight the code and click the code button in the editor.

[NBC]

Really simple:

.site-description {
    font-style: italic;
}

[NBC]

I get obliqued type, just not italics.

[Tom]

Hi there,

Looking at your Google font requests, I’m not seeing any requests for italics.

That CSS is good as long as you’re requesting the correct variants. How are you adding those variants to the Customizer? Can you share the filter?

Let us know 🙂

[NBC]

Here’s the PHP:

add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'barlow' ] = array( 
		'name' => 'Barlow',
		'variants' => array( '100', '100i', '200', '200i', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i', '800', '800i', '900', '900i'),
		'category' => 'sans-serif');
	$fonts[ 'barlow_condensed' ] = array( 
		'name' => 'Barlow Condensed',
		'variants' => array( '100', '100i', '200', '200i', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i', '800', '800i', '900', '900i'),
		'category' => 'sans-serif'
	);
	
	return $fonts;
}

[Tom]

I’m not seeing any of the i variants being requested in your HTML to Google.

Can you confirm that those values are visible and selected in the “Variants” option in the Customizer?

[NBC]

Yes, they are visible and selected. Unfortunately, I can’t do
font-style: 100i
in PHP. 😉

[Tom]

Can you show me a screenshot of your variants field in the Customizer? I wonder why the i values aren’t being output on the frontend.

[NBC]

You know what, I made a liar out of myself. For Barlow, none of the italic styles show up in the Customizer. I could have sworn they did initially, but they’re not there now.

For Barlow Condensed, I get 100i and that’s it (and it works, but it’s not what I’m looking for).

All the styles are in the PHP.

[NBC]

Here’s what the Customizer looks like with either Barlow or Barlow Condensed selected.
http://prnt.sc/u6rezv

When I first started working on this site, I am certain that all the “i” styles appeared. Now only Barlow Condensed 100i does.

[Tom]

Hmm, do you have any other functions that could be conflicting? The function itself looks good – it should be picking up those i variants.

I just plugged that exact function into my test site and this is what I’m seeing: https://www.screencast.com/t/sIXZdtZP

[NBC]

The only functions in my child style are the regular GP child-style enqueuing code and the code I pasted in above that adds these two font families to the Customizer.

For some reason, I’m now getting the 100i family member in Barlow in the Customizer, and I’ve switched the tag line to it/published the change. But none of the other “i” styles show up.

Should I send you the admin access credentials again?

[Tom]

Sure, worth a quick look 🙂

[NBC]

I’ve sent the credentials. Thanks for looking! This one’s really strange.

[Author]

Posts