hey all,
trying to load up some custom fonts which i cant seem to get working. im using the blocksy theme with a child theme (i dont have premium, trying to do this with css).
I have my fonts in their folder, setting them in my style.css with:
@font-face {
font-family: ‘AtGambit-Regular’;
src: url(‘/fonts/AtGambit/AtGambit-Regular.woff2’) format(‘woff2’);
font-weight: normal;
font-style: normal;
}
and defining headings, such as:
h1 {
font-family: ‘AtGambit-Regular’;
font-size: clamp(4.0625rem, 3.0787rem + 3.1481vw, 9.375rem);
}
But this is not working unless I add `!important` tags. What’s weirder is that I can define the p tag just fine.
I’m assuming it might be the theme preventing this from working? Is there something I need to do in functions.php?
It’s probably because your headings are assigned with a font somewhere else in a (different) stylesheet. If you inspect your headings/code in your browser, you can see if that’s the case.
I’m not familiar with the theme you’re using, but perhaps there’s a setting to disable or change the initial fonts.
You can try and locate the initial CSS for your headings and change/remove it as well. Or you can target your H tags without !important by adding some parent elements in your custom CSS.
If you need any help, a link to your project would be great.
Right click > Inspect on the H1 – you can see the css rules that are applied. Your rules need to beat the existing ones, using specificity – it’s almost never recommended using !important https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity