[Support request] Multiple local fonts don't work

[igor96]

Hi!
I’m trying to add some local fonts.
I did all that is described here:
https://docs.generatepress.com/article/adding-local-fonts/
For example: I add lobster font to wp-content/themes/generatepress_child/fonts/lobster folder.
Edit my child theme functions.php and style.css.

@font-face:
/* lobster-regular – cyrillic_latin */
@font-face {
font-family: ‘Lobster’;
font-style: normal;
font-weight: 400;
src: url(‘https://mysite.com/wp-content/themes/generatepress_child/fonts/Lobsterlobster-v20-cyrillic_latin-regular.eot’); /* IE9 Compat Modes */
src: local(‘Lobster Regular’), local(‘Lobster-Regular’),
url(‘https://mysite.com/wp-content/themes/generatepress_child/fonts/Lobsterlobster-v20-cyrillic_latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://italeen.com/wp-content/themes/generatepress_child/fonts/Lobsterlobster-v20-cyrillic_latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://mysite.com/wp-content/themes/generatepress_child/fonts/Lobsterlobster-v20-cyrillic_latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://mysite.com/wp-content/themes/generatepress_child/fonts/Lobsterlobster-v20-cyrillic_latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://mysite.com/wp-content/themes/generatepress_child/fonts/Lobsterlobster-v20-cyrillic_latin-regular.svg#Lobster’) format(‘svg’); /* Legacy iOS */
}

code added to functions.php:
/** Montserrat, philosopher, lobster, marck script, pacifico */
add_filter( ‘generate_typography_default_fonts’, ‘tu_add_local_fonts’ );
function tu_add_local_fonts( $fonts ) {
$fonts[] = ‘Montserrat’;
$fonts[] = ‘Philosopher’;
$fonts[] = ‘Lobster’;
$fonts[] = ‘Marck Script’;
$fonts[] = ‘Pacifico’;

return $fonts;
}

BUT no one of the added fonts work. I can’t find them in customizer (i purge all my cache too). I can’t understant where is the problem…
Can you help me?

[Tom]

When you copy the URLs from your @font-face src, does it download the font? Or does it go to a 404? It looks like you might be missing a / after Lobster?

That function should add the fonts to the Customizer. They should be at the bottom of the “System fonts” section, right above the “Google fonts” heading.

[igor96]

Hi Tom!
Yes, I missing / after Lobster.. I correct it but te problem persist.
And yes: when I go to @font-face url it download the font.
Any other suggestions to solve this issue?

[Tom]

So the issue now is that the fonts aren’t displaying in the Customizer? How are you adding the PHP? In your child theme functions.php?

[igor96]

Yes, thhey aren’t displaying in the Customizer.

I add this code to functions.php of my child theme:
/** Montserrat, philosopher, lobster, marck script, pacifico */
add_filter( ‘generate_typography_default_fonts’, ‘tu_add_local_fonts’ );
function tu_add_local_fonts( $fonts ) {
$fonts[] = ‘Montserrat’;
$fonts[] = ‘Philosopher’;
$fonts[] = ‘Lobster’;
$fonts[] = ‘Marck Script’;
$fonts[] = ‘Pacifico’;

return $fonts;
}

I create some folder for fonts:
content/themes/generatepress_child/fonts/lobster
content/themes/generatepress_child/fonts/montserrat
content/themes/generatepress_child/fonts/philosopher
content/themes/generatepress_child/fonts/pacifico
content/themes/generatepress_child/fonts/marck script
and I add the font’s files inside them.

I edit the style.css (child theme) file and add the @font-face.

[Leo]

Hey! Tom’s wife is in labor, he will get to this topic as soon as he can 🙂

[igor96]

🙂 Congratulations! Tanti auguri from Italy Tom!
PS: Don’t worry, I can wait.

[Tom]

Thank you!

Any chance you can send me temporary admin login details so I can take a look? If so, you can send it through this form: https://generatepress.com/contact

Be sure to mention this topic 🙂

[Author]

Posts