[Support request] uploading custom fonts

Home Forums Support [Support request] uploading custom fonts

Home Forums Support uploading custom fonts

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #875407
    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.

    #875503
    David
    Staff
    Customer Support

    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.

    #875664
    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

    #875698
    David
    Staff
    Customer Support

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

    #875742
    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?

    #875744
    David
    Staff
    Customer 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:

    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.

    #877745
    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?

    #878230
    Tom
    Lead Developer
    Lead 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.

    #878862
    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?

    #878956
    David
    Staff
    Customer 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.

    #1132315
    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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.