Page 1 of 1
[SOLVED] Fonts do not load properly?
Posted: Wed Apr 02, 2025 7:04 pm
by antmagn
Hello everyone, I'm trying to figure out if my fonts are loading correctly because I can see them fine when I'm on incognito or to another device but when I run some tests like speed tests or google rich snippets, the screenshots' font from the preview do not look the same, its like "times new roman". I use "Tahoma" in my css, I think I had not touch it anyway. I attach the two screenshots to see the difference. The example link is
https://tonias-handmade.com/Cheesecake- ... t-Gourmand, it should look like tahoma and not times....
Code: Select all
body {
font-family: 'Open Sans Condensed', tahoma;
font-weight: 400;
color: #222;
font-size: 16px;
line-height: 20px;
width: 100%;
align-items: center;
}
Thank you in advance.
OC3.0.3.8 default theme
PHP: 7.3.13
Re: Fonts do not load properly?
Posted: Wed Apr 02, 2025 7:42 pm
by by mona
Please use code tags for posting code </> above
If you have h1 set for a font it does not matter what body is.
At best you can add !important to ensure an override - which might be the cause.
Code: Select all
body {
font-family: 'Open Sans Condensed', tahoma !important;
font-weight: 400;
color: #222;
font-size: 16px;
line-height: 20px;
width: 100%;
align-items: center;
}
Tests are not real life - it may simply be something within the test program but probably you have not done your loading order correctly.
Tahoma is a web friendly font - open sans condensed is not.
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
Without spending too much time checking your css (but you should check the first comment about h1 etc.) it should fallback to "Helvetica Neue",Helvetica,Arial,sans-serif;
Re: Fonts do not load properly?
Posted: Wed Apr 02, 2025 8:29 pm
by nonnedelectari
its like "times new roman". I use "Tahoma" in my css
its actually Open Sans Condensed, which will be displayed (if supported) ahead of Tahoma and even then it will look slightly different in different browsers.
If you want Tahoma, lose the "Open Sans Condensed" part.
Re: Fonts do not load properly?
Posted: Thu Apr 03, 2025 2:25 am
by softmonke
This is really more of a CSS question and not related to OpenCart. That being said, your CSS rule of
Code: Select all
font-family: 'Open Sans Condensed', tahoma;
means that "Open Sans Condensed" will be applied first, and if that is not available, it will fallback to "Tahoma".
Anyway, you mentioned that the fonts are only not appearing correctly in screenshots when you are running speed tests so it's likely that those tool(s) are simply missing the font and it's not something that I'll worry about if it appears fine on all the different browsers that you manually test on.
Re: Fonts do not load properly?
Posted: Thu Apr 03, 2025 4:08 am
by by mona
@nonnedelectari and repeated by @softmonke
As you both have pointed out - that is the question - Why if 'Open Sans Condensed' is not available, is the back up specified Tahoma not being used. It is a web safe font, I can understand why the user thinks test sites should be using Tahoma. Both are sans serif - Times is a serif font.
Are you saying the answer is that page speed test sites do not use any back up fonts listed in css?
Re: Fonts do not load properly?
Posted: Thu Apr 03, 2025 3:16 pm
by SohBH
TS question is:
why Google pagespeed test detecting Times New Roman instead of Tahoma