[Resolved] Implement custom font but don't correct

[John Maui]

Hi,

My font is geomanist (http://atipofoundry.com/fonts/geomanist) and I try to implement custom font but the font don’t show correct. Although i can choose font from Customizer.

I do exactly like https://docs.generatepress.com/article/adding-local-fonts/ but it’s not show correct.
Here ist example from style.css in child theme

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

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

And here is the functions.php in child theme (only the adding code)

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

I have also read the other topic like https://generatepress.com/forums/topic/implement-custom-font/. So please don’t send me somethings like that 🙂

My website ist vinaloka.com and you can see text in https://www.vinaloka.com/verkehr/mit-dem-zug-durch-vietnam.html
Please help me !
Thanks for your reading 🙂

[Tom]

Hi there,

The issue is that you’re visiting your site using www, but the URLs in your child theme have no www.

Browsers will block fonts if the URLs don’t match. So if you add www to the calls in your child theme, it will work 🙂

[John Maui]

Dear Tom,
How can i add www to the calls in my child theme ?
Thanks
Vinh

[Leo]

Tom is referring to the code you have in the original topic:

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

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

The URLs hasve no www.

[John Maui]

Ah ok. I have checked it and now it works now 🙂
Thanks for your support 🙂
Vinh Pham

[Leo]

No problem 🙂

[Author]

Posts