- This topic has 10 replies, 4 voices, and was last updated 4 years, 2 months ago by Brian.
-
AuthorPosts
-
April 22, 2019 at 3:17 am #875407Pauline
Hi
I would like to add a non-google font to my website. I find the following instructions quite straightforward:
https://www.ostraining.com/blog/wordpress/custom-fonts/
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.
April 22, 2019 at 6:00 am #875503DavidStaffCustomer SupportHi there,
we provide instructions to add local fonts here:
https://docs.generatepress.com/article/adding-local-fonts/
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.
April 22, 2019 at 6:56 am #875664PaulineHi David!
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?
Thanks
PaulineApril 22, 2019 at 7:29 am #875698DavidStaffCustomer SupportThe CSS will look similar to the CSS in Step 3 of the guide you provided.
April 22, 2019 at 8:22 am #875742PaulineWould 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 SupportIf you want the Font to appear in the Customizer you will still need to add PHP.
The best solution is to add Child theme:https://docs.generatepress.com/article/using-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.
April 24, 2019 at 7:59 am #877745PaulineThanks.
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 DeveloperIf 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.
April 25, 2019 at 4:02 am #878862PaulineThanks 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 SupportWhen 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.January 14, 2020 at 3:45 pm #1132315BrianFor anyone reading this the @font-face is:
@font-face {
font-family: ‘MyWebFont’;
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.
-
AuthorPosts
- You must be logged in to reply to this topic.