2

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?

3 Answers 3

2

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.

1

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.