Adding new font

Support
#1

Hey staff,

I’ve been trying to add a new font that is not available in ‘appearence > customize > typography’. I’ve read all the previous forum posts on this but for some reason i’m not getting it to work for me.
url: http://www.feddewestera.nl/

This is what i’ve already done:

Added the font files in my font folder (i’ve tried the x folder aswell as the x-child folder)

I’ve tried these css codes:

X

@font-face {
font-family: ‘edosz’;
src: url(‘http://feddewestera.nl/wp-content/themes/x/framework/fonts/edosz.eot’),
url(‘http://feddewestera.nl/wp-content/themes/x/framework/fonts/edosz.woff’) format(‘woff’),
url(‘http://feddewestera.nl/wp-content/themes/x/framework/fonts/edosz.ttf’) format(‘truetype’),
url(‘http://feddewestera.nl/wp-content/themes/x/framework/fonts/edosz.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

X-CHILD

@font-face {
font-family: ‘edosz’;
src: url(‘http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.eot’),
url(‘http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.woff’) format(‘woff’),
url(‘http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.ttf’) format(‘truetype’),
url(‘http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

I’m kind of clueless what to do next. Maybe you guys can see if i do something wrong?

Thanks in advance!

Fedde

#2

Hi Fedde,

You can use this code in the style.css file of the child theme:

@font-face {
        font-family: 'edosz';
        src: url('http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.eot'),
        url('http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.woff') format('woff'),
        url('http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.ttf') format('truetype'),
        url('http://feddewestera.nl/wp-content/themes/x-child/fonts/edosz.svg') format('svg');
        font-weight: normal;
        font-style: normal;
}

This code should load the font on the site. Once the font is loaded, you can add the CSS code to apply the loaded font to a page element. You can do this by using a CSS selector and setting the font through CSS like this:

.x-brand {
    font-family: 'edosz' !important;    
}

Hope this helps.

#3

Hey Jade,

Thanks for the fast reply. I’ve added the css aswell as a CSS selecter:

.edosz {
 font-family: 'edosz' !important; 
}

It seems to be only working in safari.
Does that mean the files are not working correctly? I only found the .ttf file and converted it into the other files on https://everythingfonts.com.

Fedde

#4

We’re sorry but this is not theme issue. Please contact the font provider for this to see if their font can be used for web or hire a third party developer to investigate.

Thanks.