CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
Johnny Chen
Johnny Chen

Reputation: 2070

Font looks different in different browsers?

I know there are many questions about different font rendering in different browsers. But I don't think this is because of rendering.

The website is wikipedia, When I open this in Chrome it looks like this : screenshot in Chrome

As I open this in other browsers (Opera Firefox or even IE) ,it displays this font : screenshot in non Chrome

I wonder why the difference? I don't know much about fonts but I checked the CSS code it just define font-family: sans-serif; So is my chrome have something like default settings which I don't seem to find where to change?

PS: I don't find this difference when browsing other websites using Chrome, So How to avoid this difference when writing CSS?

Upvotes: 2

Views: 5151

Answers (3)

Nithyanandhan M
Nithyanandhan M

Reputation: 1554

Fonts compatibility should be differs from various browsers. The way to fix the issue is by using the google fonts or call the font extensions supported for various browsers.

@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

for more details See this link.

Upvotes: 1

Sander Koedood
Sander Koedood

Reputation: 6337

Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.

In chrome, you can set the default fonts at chrome://settings/, under advanced settings.

In safari it is less easy, but I could find this post.

In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.

A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows: font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.

For reference, you could check out this website. It has a lot of standard font stacks you can use in your CSS.

Upvotes: 2

Jacek
Jacek

Reputation: 154

Every browser makes it able to chose the fonts you want to be displayed In chrome you have to go to the settings and click 'Show advanced settings' or something like that to find content display adjustments menu

Upvotes: 1

Related Questions