[Resolved] Accessing real italic styles

Home Forums Support Accessing real italic styles

  • This topic has 16 replies, 3 voices, and was last updated 1 month ago by Tom.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1417723
    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?)

    #1418055
    Leo
    Staff
    Customer Support

    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.

    #1418073
    NBC

    Really simple:

    .site-description {
        font-style: italic;
    }
    #1418076
    NBC

    I get obliqued type, just not italics.

    #1418110
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1418603
    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;
    }
    #1419266
    Tom
    Lead Developer
    Lead Developer

    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?

    #1419270
    NBC

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

    #1419589
    Tom
    Lead Developer
    Lead Developer

    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.

    #1419622
    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.

    #1420085
    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.

    #1420759
    Tom
    Lead Developer
    Lead Developer

    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

    #1420826
    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?

    #1421009
    Tom
    Lead Developer
    Lead Developer
    #1421023
    NBC

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.