- This topic has 7 replies, 3 voices, and was last updated 2 years, 12 months ago by
Tom.
-
AuthorPosts
-
February 2, 2020 at 10:01 am #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.
February 2, 2020 at 11:31 am #1152314Leo
StaffCustomer SupportHi 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/February 2, 2020 at 2:31 pm #1152392Mathias
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.
February 2, 2020 at 5:43 pm #1152439Tom
Lead DeveloperLead DeveloperAdding 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-developmentFebruary 2, 2020 at 8:30 pm #1152488Mathias
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?
February 3, 2020 at 8:42 am #1153142Tom
Lead DeveloperLead DeveloperThe 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-developmentFebruary 3, 2020 at 9:50 am #1153197Mathias
Thanks for the explanation. I’m going to implement @font-face.
February 3, 2020 at 4:13 pm #1153458Tom
Lead DeveloperLead DeveloperNo problem! 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.