Custom fonts only show up in one page

[fderooy]

Hi there.

I’ve installed some custom fonts that are working wonderfully in my homepage. You can see them specifically here:

Now, I followed the same steps to implement the same custom fonts in this other page of my website. But in this case, they’re not showing up. See:

I used the same classes for each headline in this second page as they are specified in my homepage, but none of the browsers seem to be able to retrieve or load the fonts.

Any idea of what can be happening? Thanks a lot,

Fidel

[friech]

Hi Fidel,

Thank you for writing in, two things I can advise you here. First please update and move your @font-face declaration on the child theme’s style.css file.

@font-face {
    font-family: 'MovementBold';
    src: url('https://www.casaentierrajena.com/wp-content/fonts/movement/MovementBold.eot');
    src: url('https://www.casaentierrajena.com/wp-content/fonts/movement/MovementBold.eot?#iefix') format('embedded-opentype'),
        url('https://www.casaentierrajena.com/wp-content/fonts/movement/MovementBold.woff2') format('woff2'),
        url('https://www.casaentierrajena.com/wp-content/fonts/movement/MovementBold.woff') format('woff'),
        url('https://www.casaentierrajena.com/wp-content/fonts/movement/MovementBold.ttf') format('truetype'),
        url('https://www.casaentierrajena.com/wp-content/fonts/movement/MovementBold.svg#MovementBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Jellyka';
    src: url('https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.eot');
    src: url('https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.eot?#iefix') format('embedded-opentype'),
        url('https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.woff2') format('woff2'),
        url('https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.woff') format('woff'),
        url('https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.ttf') format('truetype'),
        url('https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.svg#JellykaDeliciousCake') format('svg');
    font-weight: normal;
    font-style: normal;
}

.font-movement {
	font-family: "MovementBold", "Lato",sans-serif !important; 
}

.font-jellyka {
	font-family: "Jellyka", "Lato",sans-serif !important; 
}

Second, add a CLASS font-movement to the text that you want to be in movement font, and a CLASS font-jellyka for the text that you want on jellyka font. That way you wont need to add multiple class that do the same thing.

Please clear your caching plugin and your browser’s cache after this changes.

Cheers!

[fderooy]

@friech:

Thanks very much for your help.

A few weeks ago when I was first building the site, I tried the option of adding the @font-face declaration directly in my child theme’s style.css. But could not make it work. So I went and followed this topic, where X’s Staff Member Prasant recommends a tutorial for custom fonts installation that adds the font declaration to the theme’s customizer. I did that, and worked perfectly.

I can’t understand why the same method won’t enable the same custom fonts for this other page. Why is it working for my homepage and not for the Ruta en Tierra Ajena page?

It should work, right?

Thanks again,

Fidel

P.S.: I will partially follow your suggestion of moving the fonts to my child theme. The files better be located on one of the child theme’s directories to avoid loosing them when updating X Pro. Thanks!

[friech]

Hi There,

I’ve seen a lot of cases where custom font is not working because they added the @font-face declaration on the theme’s customizer, there is a rule that @font-face should be added to the stylesheet before any styles, this will not be the case if you add it on the theme’s customizer Custom > CSS. It will work on Customizer > Additional CSS or Page CSS, but I will still put it on the child theme’s style.css file.

Your @font-face declaration did not work here (https://www.casaentierrajena.com/ruta/), because you’re using a relative link on the source URL.

wp-content/fonts/jellyka/JellykaDeliciousCake.eot

That path will render as below on the frontend, which is wrong.

https://www.casaentierrajena.com/ruta/wp-content/fonts/jellyka/JellykaDeliciousCake.eot

Unlike, if you’re on the home page it will render as below, which is correct.

https://www.casaentierrajena.com/wp-content/fonts/jellyka/JellykaDeliciousCake.eot

That is why I used absolute link above on my given code.

Hope this shed some lights,
Cheers!