Archived topic

Uploading custom font

5 replies · Started by Sebastián on January 16, 2018

Viewing posts 1–6 of 6

January 16, 2018 at 10:45 am #472493

Hi im trying to add a custom font to my website.

I uploaded all the files through the CPanel and then I put this CSS in the style.css of the theme:

@font-face {
    font-family: 'geomanistregular';
    src: url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Webfont/geomanist-regular-webfont.eot');
    src: url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Webfont/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Webfont/geomanist-regular-webfont.woff2') format('woff2'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Webfont/geomanist-regular-webfont.woff') format('woff'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Webfont/geomanist-regular-webfont.ttf') format('truetype'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Webfont/geomanist-regular-webfont.svg#geomanistregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'geomanistitalic';
    src: url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.eot');
    src: url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.woff2') format('woff2'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.woff') format('woff'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.ttf') format('truetype'),
         url('https://sebastiancardozo.com/wp-content/fonts/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

That's the CSS for the regular and the italic version of the font.

Is there something else i need to do? Im not seeing changes.

Also, I saw another user who asked something similar and you guys told him that he needed to install the code snippets and then put the generate_typography_default_fonts PHP. I tried but it gave me a fatal error.

Is there something im missing?

Thanks

PS: The custom font is geomanist

January 16, 2018 at 2:02 pm #472685

Hi there,

Should be the exact steps here: https://docs.generatepress.com/article/adding-custom-font/

The filter is just so that it shows up in the customizer.

What was the code you added?

January 31, 2019 at 12:15 pm #798030

this link is broken

https://docs.generatepress.com/article/adding-custom-font/

how to install custom font?

January 31, 2019 at 3:17 pm #798150

Here you go:
https://docs.generatepress.com/article/adding-local-fonts/

February 1, 2019 at 1:59 am #798432

Hi
I cant get it to work...

Cant select the font in the apperance-themes-typography, and no where on my site is the font used, please help

this s in my css for the child theme.

---
@font-face {
font-family: 'No5-Regular';
src: url('/wp-content/themes/generatepress_child/fonts/No5-Regular.eot');
src: url('/wp-content/themes/generatepress_child/fonts/No5-Regular.woff2') format('woff2'),
url('/wp-content/themes/generatepress_child/fonts/No5-Regular.woff') format('woff'),
url('/wp-content/themes/generatepress_child/fonts/No5-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

body, p, span, html, a, div, input, select, option, better, li {
font-family: 'No5-Regular' !important;
}

add_filter( 'generate_typography_default_fonts', 'tu_add_local_fonts' );
function tu_add_local_fonts( $fonts ) {
$fonts[] = 'No5-Regular';
return $fonts;
}
---

February 1, 2019 at 9:32 am #798884

The filter needs to be added using one of these methods: https://docs.generatepress.com/article/adding-php/

So, remove this from your CSS:

add_filter( 'generate_typography_default_fonts', 'tu_add_local_fonts' );
function tu_add_local_fonts( $fonts ) {
    $fonts[] = 'No5-Regular';
    return $fonts;
}

And add it using one of the methods in the article above :)

This archived topic is closed to new replies.

Start building better websites today.