Where is best to put Custom font CSS

hi there,

I have setup custom fonts and have been putting the CSS into the Theme Options Global CSS box, however is there a more efficient and reliable place to put this as sometimes it’s overridden by something else.

What is the long term recommendation for this? put in the child theme?

This is the CSS I’m using;

@import url(“http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/”);

@font-face {font-family: ‘FFScalaStdRegular’;src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.eot’);src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.eot?#iefix’) format(‘embedded-opentype’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.woff2’) format(‘woff2’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.woff’) format(‘woff’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.ttf’) format(‘truetype’);}

@font-face {font-family: ‘FFScalaStdBold’;src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.eot’);src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.eot?#iefix’) format(‘embedded-opentype’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.woff2’) format(‘woff2’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.woff’) format(‘woff’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.ttf’) format(‘truetype’);}

@font-face {font-family: ‘FFDINWebProLight’;src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.eot’);src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.eot?#iefix’) format(‘embedded-opentype’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.woff2’) format(‘woff2’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.woff’) format(‘woff’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.ttf’) format(‘truetype’);}

@font-face {font-family: ‘FFDINWebProRegular’;src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.eot’);src: url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.eot?#iefix’) format(‘embedded-opentype’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.woff2’) format(‘woff2’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.woff’) format(‘woff’),url(‘http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.ttf’) format(‘truetype’);}

body {
font-family: “FFScalaStdRegular”, Georgia, Times, serif;
}

h1 {
font-family: “FFScalaStdRegular”, Georgia, Times, serif;
}

h2 {
font-family: “FFScalaStdRegular”, Georgia, Times, serif;
}

h3 {
font-family: “FFDINWebProLight”, Helvetica, sans-serif;
line-height: 2;
}

h4 {
font-family: “FFScalaStdBold”, Georgia, Times, serif;
}

h5 {
font-family: “FFScalaStdRegular”, Georgia, Times, serif;
}

h6 {
font-family: “FFDINWebProLight”, Helvetica, sans-serif;
}

p {
font-family: “FFScalaStdRegular”, Georgia, Times, serif;
}

Hi There,

The best practice is to put it in child theme CSS file.
Clid theme never get updated in the theme update.

Thanks

Thanks for the reply.

So I put the css into the child theme, but now the custom fonts no longer work. When I put the css into the Theme Options, Global CSS window it works. But not in the Child theme.

Will send url in secure note

Hi there,

The code you have added to the style.css file of the child theme gets overridden by the internal CSS that is generated by the Theme Options.

Since you are adding the code in the style.css file which is an external CSS that gets a lower priority than the settings set from the Theme Options, you can try adding the !important rule to the CSS code you added to the child theme like:

@import url("http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/");

@font-face {font-family: 'FFScalaStdRegular';src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.eot');src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.eot?#iefix') format('embedded-opentype'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.woff2') format('woff2'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.woff') format('woff'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_0_0.ttf') format('truetype');}

@font-face {font-family: 'FFScalaStdBold';src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.eot');src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.eot?#iefix') format('embedded-opentype'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.woff2') format('woff2'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.woff') format('woff'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_1_0.ttf') format('truetype');}

@font-face {font-family: 'FFDINWebProLight';src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.eot');src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.eot?#iefix') format('embedded-opentype'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.woff2') format('woff2'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.woff') format('woff'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_2_0.ttf') format('truetype');}

@font-face {font-family: 'FFDINWebProRegular';src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.eot');src: url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.eot?#iefix') format('embedded-opentype'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.woff2') format('woff2'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.woff') format('woff'),url('http://wordpress-148426-569747.cloudwaysapps.com/wp-content/themes/pro-child/fonts/374ED6_3_0.ttf') format('truetype');}

body {
    font-family: "FFScalaStdRegular", Georgia, Times, serif !important;
}

h1 {
    font-family: "FFScalaStdRegular", Georgia, Times, serif !important;
}

h2 {
    font-family: "FFScalaStdRegular", Georgia, Times, serif !important;
}

h3 {
    font-family: "FFDINWebProLight", Helvetica, sans-serif !important;
    line-height: 2;
}

h4 {
    font-family: "FFScalaStdBold", Georgia, Times, serif !important;
}

h5 {
    font-family: "FFScalaStdRegular", Georgia, Times, serif !important;
}

h6 {
    font-family: "FFDINWebProLight", Helvetica, sans-serif !important;
}

p {
     font-family: "FFScalaStdRegular", Georgia, Times, serif !important;
}

You can read more about the CSS precedence here:

Please note that after updating the style.css, clear your browser cache to make sure you are not getting the cached version of the file.

Hope this helps.

thanks for that, it worked for me.

Cheers

You’re more than welcome, glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.