Archived topic
Unable to show local font on dynamic tipography
9 replies · Started by Alessio on March 14, 2022
Hello guys,
I'm trying to upload custom fonts locally (not a Google font) but they don't appear in dynamic typography settings. I'm working locally on MAMP.
I paste the code here that I used in additional CSS:
@font-face {
font-family: 'Colabero';
src: local(''),
url('fonts/Colabero.ttf') format('ttf'),
url('fonts/Colabero.otf') format('otf'),
url('fonts/Colabero.woff') format('woff');
}Am I missing something?
Thank you, have a nice day
Alessio
Hi there,
thats correct.
Under Font Manager > Add Font.
And in the Font Family Name field enter your font-family name e.g Colabero
And thats it.
Now when you add a Typography setting you will see Colabero in the list.
And GP will generate the necessary CSS for it ie.
.element {
font-family: Colabero;
/* other styles */
}Its a beautifully simple system that doesn't need the code of the old version to include custom fonts :)
Thank you for the answer David, my issue is that Colabero is not showing in the system fonts list, and even if I enter it manually in the Font Family field it doesn't apply to the header when I'm using it in the "Manage typography" options.
Thank you,
Alessio
it doesn’t apply to the header when I’m using it in the “Manage typography” options.
Can you share a screenshot of this ?
Of course, the first img is the font not showing in the system fonts (I entered it anyway even if it wasn't showing), in the second img there's a screenshot of it applied to h1 but not showing anyway.
Thank you,
Alessio
Watch this:
Thank you for the answer David, I did what you show in the video but unfortunately still doesn't render correctly.
Here's another screenshot for reference, the headline in the red rectangle is the H2 with Colabero font applied but not rendering correctly. https://imgur.com/dhrTfsI
Ok looking at your CSS above - specifically the URLs:
url('fonts/Colabero.ttf') format('ttf'),
url('fonts/Colabero.otf') format('otf'),
url('fonts/Colabero.woff') format('woff');These are incorrect - you will need to specify the FULL URL to where the font is located.
It worked! It's rendering properly, awesome, thank you David!
Have a nice day,
Alessio
Super glad to hear that!
