Archived topic
Multiple local fonts don't work
7 replies · Started by igor96 on July 7, 2018
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?
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.
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?
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?
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.
Hey! Tom's wife is in labor, he will get to this topic as soon as he can :)
:) Congratulations! Tanti auguri from Italy Tom!
PS: Don't worry, I can wait.
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 :)