Several Custom Fonts

[erwinanjc]

Hi there! So, a quick question. I was following a tutorial to add custom fonts on Slider Revolution (Specifically, this one: https://www.themepunch.com/faq/use-fonts-google-fonts/) and everything worked perfectly fine with the CSS code when using only one custom font.

When I tried to upload and use another font though, the code wasn’t recognized and the second font didn’t work. I uploaded everything in the same webfonts folder and added the necessary code to the styles.css document. I checked that the font name was correctly spelled and that all the files were there. Still, nothing worked when I tried to use the second custom font on the slider.

What I did to solve this on my site was using the CSS code that worked for the first font and then for my second font, I uploaded it via a WP plugin called UseAnyFont. That’s the only way I got it working, but not by manual CSS code.

This was the CSS code in the styles.css document:

@font-face {
font-family: ‘CircularStd-Bold’;
src: url(‘https://www.nopuedoescribir.com/wp-content/webfonts/CircularStd-Bold.eot’) format(‘embedded-opentype’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘CircularStd-Bold’;
src: url(‘https://www.nopuedoescribir.com/wp-content/webfonts/CircularStd-Bold.otf’) format(‘opentype’),

url(‘https://www.nopuedoescribir.com/wp-content/webfonts/CircularStd-Bold.woff’) format(‘woff’),
url(‘https://www.nopuedoescribir.com/wp-content/webfonts/CircularStd-Bold.ttf’) format(‘truetype’),
url(‘https://www.nopuedoescribir.com/wp-content/webfonts/CircularStd-Bold.svg#open_CircularStd-Bold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘lineto-circular-pro-book’;
src: url(‘https://www.nopuedoescribir.com/wp-content/webfonts/lineto-circular-pro-book.eot’);
src: url(‘https://www.nopuedoescribir.com/wp-content/webfonts/lineto-circular-pro-book.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://www.nopuedoescribir.com/wp-content/webfonts/lineto-circular-pro-book.woff2’) format(‘woff2’),
url(‘https://www.nopuedoescribir.com/wp-content/webfonts/lineto-circular-pro-book.woff’) format(‘woff’),
url(‘https://www.nopuedoescribir.com/wp-content/webfonts/lineto-circular-pro-book.ttf’) format(‘truetype’),
url(‘https://www.nopuedoescribir.com/wp-content/webfonts/lineto-circular-pro-book.svg#svglineto-circular-pro-book’) format(‘svg’);
}

The second @font-face code is different here because I tried several ways in order to make it work but it didn’t. Originally, all code was written in the same way the code is for the first “CircularStd-Bold” @font-face.

So just to learn about it and maybe for the future, what could have been wrong? What was my mistake when uploading the custom fonts? How do I add the code properly for several custom fonts to work in the CSS area?

I hope it wasn’t too confusing. But thank you so much for your support, you’re the best!

[christopher]

Hi there,

It seems that the problem is that not all the font file types available both in the code and the actual font files that you have uploaded. Please consider that you need to have ALL font types uploaded and referenced in the custom CSS code to be able to show on all browsers. So maybe for your case you tested the case with a browser that does not support that particular font type.

I suggest that you double check the URL you already mentioned and use this as the starting point:

font-face {
    font-family: 'open_sansbold';
    src: url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot');
    src: url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

See how you need to have eot, woff, ttf and svg types available.

Thank you.