- Posts
Hello,
I am trying to use a custom font (.ttf file) with Crio via the Custom CSS/JS Editor. I have the following code in the CSS code block:————————————————–
@font-face {font-family: sketch-block;
src: url(wp-content/fonts/sketch-block/Sketch_Block.ttf);
}h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: “sketch-block”;
}.site-footer .site-title > a, .palette-primary.site-header .site-title > a, .palette-primary .site-header .site-title > a, .palette-primary .site-header .site-title > a:hover, .bgc-heading.bgc-site-title, .bgc-heading.bgc-site-title:hover {
font-family: “sketch-block”;
}
————————————————–As you can probably guess I am trying to overwrite the default font family for all of the headings. This doesn’t work directly – however, once the page loads I am able to right click and “Inspect” heading text of interest, where I can see that my font is loaded and is being applied, but it is being overwritten by the selected font theme as defined in the “Headings Topography” of the Font page in the left-hand navigation menu. I can manually click to remove this font-family and my font does in fact get loaded correctly.
How can I get my font to not get overwritten by the defaults used in the theme? Any help is much appreciated.
Thanks,
ChrisHi Chris,
Thanks for reaching out and thanks for using Crio Pro WordPress theme! It’s not always easy to incorporate sourced CSS/JS files directly through the WordPress Customizer.
If you have everything setup correctly and the native CSS is just overriding your custom CSS it might help to add the
!importanttag after your element call ex:.bgc-site-title:hover{
font-family: "sketch-block !important";
}You may also want to try running your CSS through a plugin like Code Snippets instead of the using the Customizer CSS/JS options. You’d also want to address the Src file to be sure the CSS is pulling from the correct place.
I hope this helps. Let us know if you have any other questions for us.
Hi Brandon,
Thanks for your reply but I didn’t have any luck with adding the !important tag as you suggested. Similarly, the Code Snippets plugin route didn’t work either. I know the src url for the font is working, because in Firefox when I right-click->inspect on one of the headings I want to have changed, I can unselect the active font, and select the one I am trying to load, and it works fine. The problem is that the active font overwrites the one I am trying to use. Do you have any other suggestions I could try?Thanks,
Chris
- The topic ‘How can I get my font to not get overwritten by the defaults used in the theme?’ is closed to new replies.
