Navigation in cms font not the same weights

Design help CMS
1

Hi there!

Please see my blog landing page: http://appcues-042c3fa4a8ea0ab9197cdd376a405ca.webflow.io/blog

and my blog detail page: http://appcues-042c3fa4a8ea0ab9197cdd376a405ca.webflow.io/blog/engagement-rate

They have the same navigation but for some reason the font weights seem different on the blog detail page (this one is a template)

Please see my readonly link: https://preview.webflow.com/preview/appcues-042c3fa4a8ea0ab9197cdd376a405ca?preview=dadf93bfb7e096416aed5b17a4d1e9ed

Any idea why this would be happening?

2

@Tanya_Higgins this is caused by a styling conflict somewhere you have it set 2 times. in your navbar you have it set for 14px and else where you have it set for 13px and because it is set in a higher element it renders 13px not 14px. Double check your font sizes

3

Oh but other than the font size, do you see that the font weight is much thicker on one of the pages? please see screenshot

thank you for responding!

How can i find how this is happening/where something is wrong?

34%20PM
34%20PM2184×852 146 KB

4

These have individual classes, so im not sure why this would happen, my only thought is fonts might render different on templates than actual pages?

5

@Tanya_Higgins try clearing your browser cache

6

Im still seeing it, are you not seeing this issue?

Ill ask my internal team as well to check…

7

My team here sees it two different weights as well, any ideas?

8

The ‘blog-detail’ class has additional font styling, to be precise it has a different font size and line height. If you clear that one you’ll be good!

9

Please take a look now, I cleared that out, they only have one class and its the same class, but they still are different font weights when I see them

Thank you so much, im so confused why this is

10

My site is live now

here is the new links

BLOG LANDING:

BLOG DETAIL:

Read only:
https://preview.webflow.com/preview/appcues-042c3fa4a8ea0ab9197cdd376a405ca?preview=dadf93bfb7e096416aed5b17a4d1e9ed

11

Hi! Any ideas or thoughts on this?

12

Hi Tanya,

Thanks for the post about the font weight, that does appear to be strange behavior with the fonts. Sometimes the browser will render fonts differently from page to page.

When this happens, one thing you can try is to add some custom css to the head of the site:

<style>
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    }
</style>

Here is an article how to add custom code/css to the site: Custom code in head and body tags | Webflow University

I would try adding the custom code first, then let me know if the issue continues to persist.

13

Thank you so much Dave! Ill try this!