Archived topic
Font CSS help
5 replies · Started by CRAIG on July 5, 2021
***I have read https://docs.generatepress.com/article/adding-local-fonts/ prior to posting***
I have downloaded the font to my computer, extracted the files and then uploaded them into tp-content/generatepress/assets/fonts/
I have also added the CSS stylesheet via simple CSS.
Finally, I added the filter as stated on the resource linked above and ensured that I changed the font family name to exactly match that of the font family I have uploaded - the font name now shows in customizer under "System fonts"
I then went on to change all of the font family's to the newly added font family name and published
The problem is that the site appears to be displaying the previous font I used, which was a Google font, in some areas, and in other areas it using the font family fallback of sans-serif
In all cases there is no font selected within the font family drop-down or any font entered within the enter font name field
I was expecting the site to display the new fonts as selected within customizer....Have I missed a step here?
Site link added privately
Hi there,
before we look at the issue - you need to use a Child Theme to upload your fonts to ( or use the Media Library method provided in that document ) - any fonts added to the Parent Theme will be lost when the Theme is updated.
Hi David,
I have deleted the files out of the parent theme fonts folder and re-added via media library
I'm a little confused as what to do next however as I didn't get the font via the Google fonts helper website although I do have the @font-face CSS which has been added to the site via Simple CSS
First you need to fix the missing bracket in your CSS that is in your other Topic.
Then the @font-face CSS most contain the full URL to the fonts location, see this part of the doc:
https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font
Scroll down to where it says: Now, let’s remove the filename, and take note of the URL for the next step.
I think that's it working now; I just wasn't too sure about the URL part. I just pasted it in front of all the filenames in the CSS. I take it that's all the google font helper tool would have done.
Thanks for your help
Thats correct - the font help just prepares the @font-face for you :)
Glad to be of help.
