Custom Muli font not rendering correctly in different browsers and modes

[aparnarevi]

Hi, 

We have included some of the custom fonts, however the same is rendering incorrectly. Some pages are showing the correct font in all modes of desktop, Tablet and mobile while others pages are showing the Times New Roman font. Can somebody let us know what we did wrong

[piersg]

Hi @aparnarevi could you give us a link to a live/preview page where you're seeing this issue please?

[aparnarevi]

Hi @piersg .. thank you for replying 

This is the live site where we see the correct font -The font weights and style seems to be correct in most places thought the issue persists in some places like in the card. The letter 'a' is what gives it away - https://bristolwater-co-uk-7850638.hs-sites.com/our-community

This is the link to the site that does not show the font style and weight correctly : https://bristolwater-co-uk-7850638.hs-sites.com/service

I have used the same font everywhere but all the pages seem to render the fonts differently. Hope I have explained it well.

Thank you 

[piersg · Accepted solution]

I can see a few instances where the Muli font isn't applied, e.g. the "Find out more" on your cards, because those are a tags that haven't been wrapped in a p tag. I think the issue is that you're not applying Muli globally but to each tag individually

If you write your font like this in your main css file, it should apply everywhere and you won't need to have specific for rules for each heading size, the paragraph and classes like .tile__title

body {
    font-family: '[Your font]', [fallback1], [fallback2], sans-serif;
    font-weight: 400;
}

If you want to apply one css rule to everything though, you can chain css selectors together with a comma:

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: '[your font]', [fallback1], [fallback2], sans-serif;
    font-weight: 500;
}