How to add Open Sans Condensed (Google Font) properly

[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.

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mathias]

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

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts