[Resolved] How to add Open Sans Condensed (Google Font) properly

Home Forums Support [Resolved] How to add Open Sans Condensed (Google Font) properly

Home Forums Support How to add Open Sans Condensed (Google Font) properly

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1152248
    Mathias

    We want to add Open Sans Condensed as font for text below images. But all we get is either a serif font or if there is a fall back the standard font, which is Open Sans.

    This how we’ve tried:

    Snippet

    add_filter( ‘generate_typography_customize_list’, ‘tu_add_google_fonts’ );
    function tu_add_google_fonts( $fonts ) {
    $fonts[ ‘Caveat’ ] = array(
    ‘name’ => ‘Caveat’,
    ‘variants’ => array( ‘300’, ‘300i’, ‘400’, ‘400i’, ‘500’, ‘500i’, ‘600’, ‘600i’, ‘700’, ‘700i’ ),
    ‘category’ => ‘serif’
    );

    $fonts[ ‘open sans condensed’ ] = array(
    ‘name’ => ‘open sans condensed’,
    ‘variants’ => array( ‘300’, ‘500’, ‘700’ ),
    ‘category’ => ‘serif’
    );

    return $fonts;
    }

    Custom CSS

    .wp-caption-text {
    font-family: Open Sans Condensed, Open Sans;
    }

    Please note, that we’ve added Open Sans as a fall back just because it does not work yet. If choosen in the customizer for H1-n or body text the condensed font variant is displayed properly.

    Did we miss something? Thank you in advance.

    #1152314
    Leo
    Staff
    Customer Support

    Hi there,

    Can you replace
    $fonts[ 'open sans condensed' ] = array(
    with
    $fonts[ 'open_sans_condensed' ] = array(

    And make sure the right quotation is used as per the examples here:
    https://docs.generatepress.com/article/customizing-the-google-font-list/

    Let me know 🙂

    #1152392
    Mathias

    Hi Leo, thanks. That seems to break it even for the H1, H2… customizer. Unfortunately I can’t find differences in the quotation. By the way, the Caveat font works fine within the same snippet. We use it as H5 (choosen via customizer) and in several extra CSS groups.

    #1152439
    Tom
    Lead Developer
    Lead Developer

    Adding it to the Customizer doesn’t actually add it to your website – you need to choose the font inside the Customizer in order for it to display.

    In order to use a font without setting it in the Customizer, you just need to use @font-face: https://css-tricks.com/snippets/css/using-font-face/

    Let me know if you need more info 🙂

    #1152488
    Mathias

    Thank you Tom. If I got it right, we shall add certain fonts to our (child) theme. I am considering it. But why do we get Open Sans and Caveat without @font-face but not Open Sans Condensed? Isn’t it possible with the php filter plus CSS? Or how should this look like?

    #1153142
    Tom
    Lead Developer
    Lead Developer

    The fonts in the Customizer list are there to choose for our select elements.

    In this case, .wp-caption-text isn’t one of those elements, so none of the options in the Customizer will target it.

    If you were already using the font somewhere else on the site (like the site title, for example), then you could just add the font-family to that class and be done with it.

    If you’re not using the font elsewhere, you need to use @font-face in your CSS.

    Let me know if that makes sense or not 🙂

    #1153197
    Mathias

    Thanks for the explanation. I’m going to implement @font-face.

    #1153458
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.