Search code examples
htmlcssfontssafarifont-face

Fonts look different on Safari, Firefox and IE than on Chrome

I use a font called "Basic" and it looks like it's supposed to look like on chrome, but then when I view it on other browsers, although they load the font, it looks different, like bulkier and less rounded. This font only has one weight and I just can't seem to figure out what causes this issue and how to fix it... Would appreciate any help

@font-face {
font-family: "Basic";
src: url('fonts/basic-regular-webfont.woff2') format('woff2'),
    url('fonts/basic-regular-webfont.woff') format('woff'),
    url('fonts/Basic-Regular.ttf') format('truetype');

}

Solution

  • That's ordinary, there are drastic differences from browser to browser on how the actual rendered text looks. The important thing here is that no matter how much control you try to exert over text, in the end, you don’t get much. Not to mention most browsers are able to let users re-size and override font settings on the fly.

    Check this article: Font Rendering Differences: Firefox vs. IE vs. Safari