Applying custom CSS to headings and text fields in Theme X

Support
#1

I’m trying to create a class for a script font to override the site’s usual Open Sans. I’d like to apply the class .script to all different heading types, potentially. But at this point, I can not get it to appear! I was successful in adding other classes.

For example, I added this to CSS under customizer. Applied the class in the class field within a text box, and it worked.

.services, x-text-type {
  font-size: 1.75em;
  font-weight: normal;
  line-height: 50px;
  color: #414042;
}

Now I’d like to add this to apply to text as well.

.script {
  font-family: 'DancingScript' !important;
}

It’s not working! I was able to apply script using the ‘styles’ field, but I’d rather use classes to be more consistent and be able to change text even within the same headline.

http://dev.nutrition-connection.com/

Please let me know if you have suggestions!

#2

The CSS is working, the problem is that you aren’t actually loading the font on the front end. If you have a custom font to add, this will help: https://xthemetips.com/adding-your-own-font-to-x/139/

If you want to add another Google font to X, try this and use section D for implementation: https://www.designbombs.com/add-google-fonts-wordpress/

#3

Thanks for the response! I was following these directions: https://theme.co/apex/forums/topic/merriweather-google-font-problem/#post-219525

I had the developer upload the fonts to the server, and added this to the CSS:

@font-face {
  font-family: 'DancingScript';
  src: url('http://dev.nutrition-connection.com/fonts/dancingscript-bold-webfont.eot');
  src: url('http://dev.nutrition-connection.com/fonts/dancingscript-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('http://dev.nutrition-connection.com/fonts/dancingscript-bold-webfont.woff') format('woff'),
       url('http://dev.nutrition-connection.com/fonts/dancingscript-regular-webfont.woff') format('woff'),
       url('http://dev.nutrition-connection.com/fonts/dancingscript-bold-webfont.ttf') format('truetype'),
       url('http://dev.nutrition-connection.com/fonts/dancingscript-regular-webfont.ttf') format('truetype'),
       url('http://yoursite.com/fonts/dancingscript-bold-webfont.svg#dancingscriptBold') format('svg'),
       url('http://yoursite.com/fonts/dancingscript-regular-webfont.svg#dancingscriptRegular') format('svg');
}
#4

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#5

Hello @aniemczyk,

As mentioned by @michaelbourne, if your CSS is in place but the fonts aren’t loading, then you will need to ensure that you are referencing them at their proper location. The link he provided should be able to help you in applying custom fonts.

Cheers!