How to include fonts within child theme?

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

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?

Woohoo looks like full URLs worked! Thank you!

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