[Support request] uploading custom fonts

[Pauline]

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.

GeneratePress 2.2.2

[David]

Hi 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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pauline]

Hi 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
Pauline

[David]

The CSS will look similar to the CSS in Step 3 of the guide you provided.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pauline]

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?

[David]

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:

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pauline]

Thanks.

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?

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pauline]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

For 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.

[Author]

Posts