Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #47414
    Chris
    Guest

    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,
    Chris

    #47448
    Brandon C
    Keymaster

    Hi 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 !important tag 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.

    • This reply was modified 2 years, 2 months ago by Brandon C.
    #47523
    Chris
    Guest

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How can I get my font to not get overwritten by the defaults used in the theme?’ is closed to new replies.