How to include fonts within child theme? - Support | Kriesi.at

Hi guys,

I have a site which references fonts located in the primary enfold/css folder (not Enfold child). The problem is whenever the theme updates, I have to manually upload these fonts. Is there a way to place these fonts in the child theme folder and reference them there, so I don’t have to upload the fonts each time the theme is uploaded?

Thanks for your help!

Dave

September 3, 2015 at 10:39 pm #498034

Basilis

Hey atrixdave!

You can use the fonts on any folder you want, even on your site root folder.
How you are including them now?


@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You can change the font URL with what ever you think is better

Regards,
Basilis

September 4, 2015 at 7:36 pm #498580

Hi Basilis,

Thanks for the reply. I’m only using a custom font for certain headers. I’ll show you how I have it configured currently and maybe there’s a better way?

This is what I have in my Quick CSS:

h1,h2,h3,h4,h5,h6 {font-family: trade_gothic_lt_stdbold;}
.avia-content-slider .slide-entry-wrap {margin-bottom: 5px !important;}
.modern-quote .av-special-heading-tag {font-family: trade_gothic_lt_stdbold;}
#top .main_menu .menu li, #footer .widgettitle, .avia_widget_section .widgettitle {font-family: trade_gothic_lt_stdregular !important; text-transform:uppercase;}
H3.av-special-heading-tag, #top .alternate_color.title_container .main-title a {font-family: trade_gothic_lt_stdregular;}

And I have this in my custom.css file in the main Enfold folder (not Enfold Child):

@font-face {
    font-family: 'trade_gothic_lt_stdregular';
    src: url('tradegothicltstd-webfont.eot');
    src: url('tradegothicltstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('tradegothicltstd-webfont.woff') format('woff'),
         url('tradegothicltstd-webfont.ttf') format('truetype'),
         url('tradegothicltstd-webfont.svg#trade_gothic_lt_stdregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'trade_gothic_lt_stdbold';
    src: url('tradegothicltstd-bd2-webfont.eot');
    src: url('tradegothicltstd-bd2-webfont.eot?#iefix') format('embedded-opentype'),
         url('tradegothicltstd-bd2-webfont.woff') format('woff'),
         url('tradegothicltstd-bd2-webfont.ttf') format('truetype'),
         url('tradegothicltstd-bd2-webfont.svg#trade_gothic_lt_stdbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

And I have those fonts uploaded to the css folder within the Enfold folder (not Enfold Child).

Can I include the changes above into Enfold Child somehow so I don’t have to modify these each time I update the theme?

Thank you for your help!

Dave

September 4, 2015 at 8:54 pm #498596

Basilis

Hey!

Yes, you can add the CSS code of your choise to the style.css file of the Child Theme, and you will not need to update every time ;-)

Regards,
Basilis

September 9, 2015 at 6:59 pm #500686

Ok maybe you can help more because its not working…

I now have this in my QuickCSS:

/* -- FONT CHANGES -- */
@font-face {
    font-family: 'trade_gothic_lt_stdregular';
    src: url('tradegothicltstd-webfont.eot');
    src: url('tradegothicltstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('tradegothicltstd-webfont.woff') format('woff'),
         url('tradegothicltstd-webfont.ttf') format('truetype'),
         url('tradegothicltstd-webfont.svg#trade_gothic_lt_stdregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'trade_gothic_lt_stdbold';
    src: url('tradegothicltstd-bd2-webfont.eot');
    src: url('tradegothicltstd-bd2-webfont.eot?#iefix') format('embedded-opentype'),
         url('tradegothicltstd-bd2-webfont.woff') format('woff'),
         url('tradegothicltstd-bd2-webfont.ttf') format('truetype'),
         url('tradegothicltstd-bd2-webfont.svg#trade_gothic_lt_stdbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1,h2,h3,h4,h5,h6 {font-family: trade_gothic_lt_stdbold;}
.avia-content-slider .slide-entry-wrap {margin-bottom: 5px !important;}
.modern-quote .av-special-heading-tag {font-family: trade_gothic_lt_stdbold;}
#top .main_menu .menu li, #footer .widgettitle, .avia_widget_section .widgettitle {font-family: trade_gothic_lt_stdregular !important; text-transform:uppercase;}
H3.av-special-heading-tag, #top .alternate_color.title_container .main-title a {font-family: trade_gothic_lt_stdregular;}
/* -- END FONT CHANGES -- */

And I uploaded the fonts to the enfold-child folder.

The fonts aren’t displaying correctly. Any ideas why?

September 10, 2015 at 9:54 am #500854

Rikard

Keymaster

Hi,

Please try using the full URL to the files, for instance:

src: url('http://yoursite.com/wp-content/themes/child-theme/font-folder/tradegothicltstd-webfont.eot');

Best regards,
Rikard

September 14, 2015 at 7:26 pm #502988

Woohoo looks like full URLs worked! Thank you!

This reply was modified 9 years, 2 months ago by atrixdave.

September 14, 2015 at 8:05 pm #502998

And now I try to update my live site and it doesn’t work…

Its working on staging, not on live.

This is my code in Quick CSS, and the fonts are in enfold-child/fonts:

/* -- FONT CHANGES -- */
@font-face {
    font-family: 'trade_gothic_lt_stdregular';
    src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.eot');
    src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.woff') format('woff'),
         url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.ttf') format('truetype'),
         url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.svg#trade_gothic_lt_stdregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'trade_gothic_lt_stdbold';
    src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.eot');
    src: url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.woff') format('woff'),
         url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.ttf') format('truetype'),
         url('/wp-content/themes/enfold-child/fonts/tradegothicltstd-bd2-webfont.svg#trade_gothic_lt_stdbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1,h2,h3,h4,h5,h6 {font-family: trade_gothic_lt_stdbold !important;}
.avia-content-slider .slide-entry-wrap {margin-bottom: 5px !important;}
.modern-quote .av-special-heading-tag {font-family: trade_gothic_lt_stdbold;}
#top .main_menu .menu li, #footer .widgettitle, .avia_widget_section .widgettitle {font-family: trade_gothic_lt_stdregular !important; text-transform:uppercase;}
h3.av-special-heading-tag, #top .alternate_color.title_container .main-title a {font-family: trade_gothic_lt_stdregular;}
/* -- END FONT CHANGES -- */

Any ideas?

This reply was modified 9 years, 2 months ago by atrixdave.

September 14, 2015 at 10:14 pm #503034

Basilis

Hey!

Try use the full URL, add the domain to the font file.

Regards,
Basilis

September 14, 2015 at 10:41 pm #503055

Not working! When I add the @font-face code to the custom.css file found within the main Enfold/css folder, the font works…but not in QuickCSS.

Any ideas?

September 15, 2015 at 11:42 am #503234

Rikard

Keymaster

Hey,

Did you verify that you get to the actual file when going to http://yoursite.com/wp-content/themes/enfold-child/fonts/tradegothicltstd-webfont.eot for instance?

Best regards,
Rikard

September 15, 2015 at 5:34 pm #503545

Yes, when I go to that URL I download the font file.

September 15, 2015 at 11:49 pm #503764

Josue

Hi,

Can you please create us a WordPress administrator account? post it here as a private reply.

Regards,
Josue

September 17, 2015 at 8:14 pm #505109

Hi Josue,

Yes please use this login info and check it out.

September 18, 2015 at 4:01 am #505205

Josue

Hey!

@font-face isn’t working there because this rule needs to be placed at the start of the stylesheet in order to work (Quick CSS content is placed at the bottom in a dynamically generated stylesheet along with your Styling settings).

What you can do is place a style tag in the head using the wp_head hook, add the following to the very end of your theme / child theme functions.php file:

add_action('wp_head', function() {
?>
<style>
....@font-face code here...
</style>
<?php
});

Cheers!
Josue

September 18, 2015 at 5:44 pm #505711

Thanks Josue that works. You are the man!

September 18, 2015 at 9:01 pm #505772

Josue