Typeface across different browsers
-
-
- ianmol100
- Hero Rocketeer
- Posts: 275
- Thanks: 1
-
Hello RT,
Using gantry 5 and Joomla 3.5.1
We have set the fonts in the Gantry templates, but the body fonts change depending on the sytem and browser they are displyed on.
I there any way to make the fonts more consistent across browsers?
Thanks
Ian
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Please do a screenshot of your problem and annotate to make it clear.
It depends which font you are using? Different browser use different font file formats (woff, woff2, svg, eot, ttf) and there will alway be variations between them. Plus if you choose to use "local" fonts (leave it to the browser) then defaults fonts (inside the browser) vary in appearance too (e.g. helvetica on a PC will look slightly different to helvetica on a MAC).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- ianmol100
- Hero Rocketeer
- Posts: 275
- Thanks: 1
-
Sorry Mark,
Forgot the URL.
We have asked for screen dumps from the client, but dont have them yet.
They say they are using Chrome, we assume on a Windows system.
They say the typeface is Serif, when we have set the site to Open Sans.
Thanks
Ian
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I compare Chrome and Firefox and they are roughly the same (allowing for usual difference in browser rendering of fonts). There's certainly no difference in serif vs sans-serif fonts.
I need to see the screenshot and I also need to know what exact browser and version.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- ianmol100
- Hero Rocketeer
- Posts: 275
- Thanks: 1
-
Hi Mark,
They are using Windows 7
See screen dumps of page is in what looks like Times
substancetestsite.co.uk/2016/index.php/e...althy-eating-matters
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I am using the same version of Chrome and as you can see from my screenshot the font shows correctly.
But... I checked what "Open Sans" font-face definition you were using and it only loads "woff2" file types. I.e. no eot, svg, woff or ttf files. Therefore you are leaving Chrome to try and find the closest local font to that it has. In fact, you haven't even specified any other fonts in your font stack at all (normally your would provide a list of fonts that would be used in order until a font can be loaded e.g. "open Sans", arial, sans-serif).
So the problem is the font that you are using and the font definition that is being loaded.
My advice... use a different font.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- ianmol100
- Hero Rocketeer
- Posts: 275
- Thanks: 1
-
Thanks MR T,
If I changed the font, how would I know that the new font contained eot, svg, woff or ttf files?
Would I have to use the font stack.
Can you point me towards info on font stacks in Gantry 5 ?
Thanks
Ian
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You were choosing a font in Gantry 5 right? The font you chose was a google font. The font-face definitions come from google's site. If you use Firebug (as I did in my screenshot) you will see the font definitions as provided from google. The font stack is something you write when you use the font in your CSS (or what get's provided as part of that font definition). e.g.
body { font-family: "Open Sans", arial, sans-serif; }
The above means load a font called "Open Sans" but if you can't find it or the font file is not right then use Arial font instead, if you can't find that then use any sans-serif font that you have available. So, it's a "stack" of fonts.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- ianmol100
- Hero Rocketeer
- Posts: 275
- Thanks: 1
-
Hi Mark,
Can you clarify a few things please.
When I selet a Google font in the template, does it mean that any Google font, and it various file types, may not be avilable in full, or is it just the Open Sans font that I have selected.
If I add the css you have suggested to the custom css file would the font I selected be displayed correctly in all browsers.
Finally why would the template not be able to find the Opens Sans font?
Thanks
Ian
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Google font definitions vary in their content some are simpler than others. I think the particular issue you were having was the "Open Sans" font - not google fonts in general. I use Google fonts on many of my client sites and there is no issue.
That CSS I gave was illustrative of font stacks - it is not a solution to your issue. The Google Font for "Opens Sans" only includes a woff2 file type not all the others, that is the issue.
Different browsers understand different font file formats. Therefore you have to provide all the font file formats to support all the browsers. It's not the template that cannot find the file, it is the browser that says "I can't find a file format that I understand in the list of fonts that you gave me to work with (the list being only 1 font file in the font definition)".
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.081 seconds