Docs

[Chasebrks]

Hello,

I recently purchased the “Van Condensed” webfont in order to install it on my site. After reading a number of threads here I followed the proper procedure and it appears I made a mistake as the code is not currently functioning. I attempted to assign this font to the header and as a class, neither of which is currently functional. Help appreciated, my code if below. I have checked to ensure the filepaths are correct. Website in question is devsite.chasebrks.com

@font-face {
  font-family: 'VanCondensed_Pro';
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Pro.eot');
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Pro.eot?#iefix') format('embedded-opentype'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Pro.woff') format('woff'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Pro.woff2') format('woff2'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Pro.ttf')  format('truetype');
}

@font-face {
  font-family: 'VanCondensed_ProItalic';
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_ProItalic.eot');
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_ProItalic.eot?#iefix') format('embedded-opentype'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_ProItalic.woff') format('woff'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_ProItalic.woff2') format('woff2'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_ProItalic.ttf')  format('truetype');
}

@font-face {
  font-family: 'VanCondensed_Light';
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Light.eot');
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Light.eot?#iefix') format('embedded-opentype'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Light.woff') format('woff'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Light.woff2') format('woff2'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Light.ttf')  format('truetype');
}

@font-face {
  font-family: 'VanCondensed_LightItalic';
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_LightItalic.eot');
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_LightItalic.eot?#iefix') format('embedded-opentype'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_LightItalic.woff') format('woff'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_LightItalic.woff2') format('woff2'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_LightItalic.ttf')  format('truetype');
}

@font-face {
  font-family: 'VanCondensed_Bold';
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Bold.eot');
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Bold.eot?#iefix') format('embedded-opentype'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Bold.woff') format('woff'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Bold.woff2') format('woff2'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_Bold.ttf')  format('truetype');
}

@font-face {
  font-family: 'VanCondensed_BoldItalic';
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_BoldItalic.eot');
  src: url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_BoldItalic.eot?#iefix') format('embedded-opentype'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_BoldItalic.woff') format('woff'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_BoldItalic.woff2') format('woff2'),
       url('http://www.devsite.chasebrks.com/wp-content/themes/x-child/framework/fonts/VanCondensed/VanCondensed_BoldItalic.ttf')  format('truetype');
}

.titlefont {
	font-family: 'VanCondensed_Pro', !important;
}

.x-navbar .x-nav > li > a {
  font-family: 'vancondensed_pro', !important;
}

[Rue Nel]

Hello There,

Thanks for writing in! Please make sure that you have the correct font family name as you have declared in the @font-face code. And then please also keep in mind that this is the order of the styles.
– Stack style.css
– Child theme’s style.css
– Customizer’s custom css
– Cornerstone’s custom css

So to avoid the customizer from overriding your css code in the child theme, please add this code instead:

.x-child-theme-active .x-navbar .x-nav-wrap .x-nav > li > a {
  font-family: 'VanCondensed_Pro', serif;
}

Hope this helps.

[Author]

Posts