- This topic has 7 replies, 3 voices, and was last updated 4 years, 1 month ago by Tom.
-
AuthorPosts
-
February 2, 2020 at 10:01 am #1152248Mathias
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 #1152314LeoStaffCustomer 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 🙂
February 2, 2020 at 2:31 pm #1152392MathiasHi 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 #1152439TomLead 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 🙂
February 2, 2020 at 8:30 pm #1152488MathiasThank 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 #1153142TomLead 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 🙂
February 3, 2020 at 9:50 am #1153197MathiasThanks for the explanation. I’m going to implement @font-face.
February 3, 2020 at 4:13 pm #1153458TomLead DeveloperLead DeveloperNo problem! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.