I am using Lato font for my HTML.
when the text is in Italic it is looking good on the chrome browser, but when the same text is seen in Mozilla Firefox it looks more tilted towards the right → means acuter in terms of geometrical appearance.
what is the issue? can this be fixed or it is something browser-based, and nothing can be done.
Chrome→
Mozilla →
the actual difference can be seen by visualizing the font issue in the two different browser.
P.S. → lato in italics issue.
I’m not sure whether it’s of any help, but this is how it looks in iOS Safari, which to my eye looks slightly different again, though that could be down to the screen size it’s presented as. My guess is that it’s browser differences, or more likely the underlying browser engine. I can’t really test it at the moment though.
Yes,
same issue in Mozilla. modernizr JS can help in this?
I’d be surprised if it did. It can only really override the user agent styling, giving you a base to apply your own choice of styling. It’s kind of italic on / italic off. I don’t think you can modify what italic means for a browser.
If you open Lato font(Italic) direct from google website in Mozilla →
then there is no issue. It resolves well in the Mozilla Firefox too.
Sounds like it’s your implementation that is the problem then.
In style.css I have imported it like this →
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Lato');
h1, h2, h3, h4, h5, h6 {
/*font-family: sans-serif;*/
font-family: 'Lato', sans-serif;
margin: 0;
font-weight: normal;
color: #26292C;
}
and in the HTML like this →
<h1 class="italic">Do you have a pre purchase question?</h1>
where italic is:
.italic {
font-style: italic;
}
Have you checked the dev tools in the respective browsers? I’m just wondering whether one might not be downloading the Lato font and is dropping back to Sans Serif.
I hardly use Mozilla, can you please guide me how to check whether the Mozilla is downloading the font or not?
Not from where I am at the moment, as I’m on my iPad (no dev tools). Usually, it would be under something like the network tab within dev tools (F12?). If you refresh the page with dev tools open, you should be presented with a list of external resources that have/have not been downloaded.
Not that then (process of elimination). A 200 code means it’s downloaded successfully.
Assuming your website is HTTP I wonder if it because the fonts are downloaded over HTTPS.
then how it is working fine in chrome? It is downloading on the same http. Isn’t it?
I’ve never used Google fonts. When you link to a font like that, does that automatically include all versions of the font, or do you need to link to the italic version separately? My understanding is that where a font lacks an actual italic version, browsers will simply skew the “normal” font, which would account for differences between browsers.
Looks like something that will fix the issue. let me google this thing, and I will update you.
#Issue Fixed!
Previously →
@import url('https://fonts.googleapis.com/css?family=Lato');
Changed to →
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
This is How to do this →
Just be aware that you’ve imported a lot of fonts there, which could add quite a lot to your page weight, and so slow it down somewhat. I’d only want to load the font weights I was actually going to use, though this may not be fully apparent in the early stages of the design development.
Make sense! Noted!
I created that gif for demonstration for anyone visiting in the late future.
When you download a custom font you will in most cases need to download the custom variations of that font such as italic and bold etc (assuming you are going to need those styles and weights). If you don’t download the variations then you will get a faux bold or italic effect applied by the browser which will not match the way the font was supposed to be designed (and will vary in browsers).
