My custom webfont does not appear in any list in Pro Theme

[Edouard]

Hello,

I have copied custom webfonts to the server in a dedicated folder as well as the decicated css file with the many font-face statements.

@font-face {
font-family: ‘andes_semibold’;
src: url(‘Andes-SemiBold-webfont.eot’);
src: url(‘Andes-SemiBold-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘Andes-SemiBold-webfont.woff2’) format(‘woff2’),
url(‘Andes-SemiBold-webfont.woff’) format(‘woff’),
url(‘Andes-SemiBold-webfont.ttf’) format(‘truetype’),
url(‘Andes-SemiBold-webfont.svg#andes_semiboldsemibold’) format(‘svg’);
}

I have add a link to this CSS stylesheet to the Global CSS in the Theme Options.

link rel=“stylesheet” href="/wp-content/webfonts/stylesheet.css" type=“text/css” charset=“utf-8”
(angles brackets removed to allow posting on this support forum)

Despite doing that, I cannot choose this webfont in the theme options, not even when using the Font Manager. Only System and Google fonts are offered. What should I do? I know I can always use a plugin such as the great Microthemer, but that kind of defeats the purpose of a full-featured configurable theme.

I have seen that there is another place where to add CSS, in the WordPress standard appearance configuration “Additional CSS” but I don’t know what the difference is. In any case, their content does not sync up.

Thanks in advance for your help!

[mldarshana]

Hi There @Lombard

Thanks for writing in! If your preferred fonts are available on Google Fonts, you can use our Font Manager article here (https://theme.co/apex/forum/t/font-manager/101) to see how you can utilize it.

The other method is to use your child theme’s style.css or use X -> Theme Options -> CSS area to import those fonts. If you’re using that method, you will have to assign those fonts to your preferred HTML elements as well. Please follow this detailed post to understand it better (https://theme.co/apex/forum/t/setting-custom-fonts/40839/2?u=mldarshana).

Hope that helps.

[Edouard]

Thank you. I don’t use a child theme but I could solve the problem after your answer inspired to do two things: include the full path to the webfonts in the css, directly copy/paste the CSS into the Theme Options panel. I had mistakenly pasted there the link rel code that had the same purpose (to include the CSS code) but that was supposed to go into the script part of the pages.

[friech]

We are delighted to assist you with this.

Cheers!