Docs

[markw1]

Hi all,

I am trying to implement a custom font on a new website.

I have followed:
https://community.theme.co/forums/topic/custom-font-2/

and added the custom font to my child theme style.css
BUT on inspecting the element it is just not working, it doesn’t seem to pick up anything in the style.css

———–
@font-face {
font-family:’brandon_grotesque_bold’;
src: url(‘http://loves.kinkoo.co.uk/webfonts/Brandon_bld.otf’);
src: url(‘http://loves.kinkoo.co.uk/webfonts/Brandon_bld.otf?#iefix’) format(’embedded-opentype’);
font-weight: bold;
font-style: normal;
}
@font-face {
font-family:’brandon_grotesque_reg’;
src: url(‘http://loves.kinkoo.co.uk/webfonts/Brandon_reg.otf’);
src: url(‘http://loves.kinkoo.co.uk/webfonts/Brandon_reg.otf?#iefix’) format(’embedded-opentype’);
font-weight: normal;
font-style: normal;
}
header a.x-brand .x-brand {
font-family: ‘brandon_grotesque_bold’, sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: ‘brandon_grotesque_bold’;
}
body {
font-family: ‘brandon_grotesque_reg’, sans-serif;
}
———–
i have
* checked the files are there
* validated the css
BUT cannot understand why the styles.css isn’t seem to be picked up.
when I inspect the elements the header still has the Google Lato font picked in the customiser…..

Any ideas what else I can check??

thanks

Mark

[markw1]

found answer 🙂

Add !important;

i.e.
header a.x-brand .x-brand {
font-family: ‘brandon_grotesque_bold’ !important;
}

[John Ezra]

On behalf of my colleague and the rest of the team, you’re most welcome! Also, thanks for sharing your solution. Have a wonderful Day! 🙂

[Author]

Posts