- This topic has 10 replies, 4 voices, and was last updated 3 years, 2 months ago by Brian.
April 22, 2019 at 3:17 am #875407Pauline
I would like to add a non-google font to my website. I find the following instructions quite straightforward:
Would these instructions work with the generatepress theme (it involves uploading the font to the generatepress font folder)? I would then use @font-face via your Simple CSS plugin.GeneratePress 2.2.2April 22, 2019 at 6:00 am #875503DavidStaffCustomer Support
we provide instructions to add local fonts here:
Worth reading all of it although the first part is about adding google fonts locally.
As a general rule, you never make amends to the Parent Theme files as they will be overwritten when the theme gets updates.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 22, 2019 at 6:56 am #875664Pauline
I did see this article but got a bit lost after it said I would have to return to the Google Fonts Helper website to copy the CSS. The font I am using is not a google font, so where would I get the CSS from?
PaulineApril 22, 2019 at 7:29 am #875698DavidStaffCustomer Support
The CSS will look similar to the CSS in Step 3 of the guide you provided.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 22, 2019 at 8:22 am #875742Pauline
Would it be possible to just upload the font into a newly created folder outside the GP theme, and link the CSS to that, thereby avoiding the use of php? If yes, where would be the best place to store this folder?April 22, 2019 at 8:26 am #875744DavidStaffCustomer Support
If you want the Font to appear in the Customizer you will still need to add PHP.
The best solution is to add Child theme:
Then you can add Fonts folder to the Child Theme directory and the PHP snippet would go in your child theme functions.php file.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 24, 2019 at 7:59 am #877745Pauline
Just out of curiosity, if I don’t upload the font file, but it appears in my browser when I specify it in the CSS, if someone viewing my site does not have the font on their computer, does the font revert to the browser default, or the font specified in the generatepress theme?April 24, 2019 at 3:24 pm #878230TomLead DeveloperLead Developer
If the font isn’t available for the user, it will fall back to the next available font. For example, your site will likely tell the user to use sans-serif, and the site will show the best available sans-serif font available on the user’s browser/computer.
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 25, 2019 at 4:02 am #878862Pauline
Thanks Tom. If I don’t use CSS to change the font, but use the generatepress customizer to specify a font, will a user still be able to see this font if they don’t have it on their computer?April 25, 2019 at 5:11 am #878956DavidStaffCustomer Support
When the user visits you site their web browser will download your custom font 🙂
If for whatever reason the font cannot be downloaded, say the user has something on his browser to block this, then it will fallback to a basic font like Tom said.
Adding CSS: http://docs.generatepress.com/article/adding-css/January 14, 2020 at 3:45 pm #1132315Brian
For anyone reading this the @font-face is:
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
Change the url on each to your website folder.
- You must be logged in to reply to this topic.