Menu
I'm building a site that uses Googles Webfont Oswald. Some of my coworkers are experiencing a different lineheight, which breaks the site. After researching, it's because they have the font installed, while most other people dont. This difference causes the issue. Is there any way to force the browser to use the webfont, and not render it with the native font?
more info.
I am specifying the line-height, height, and font-size as the same size.
249
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.
On Windows, the font format has a significant impact on the rendering. The crucial difference is between PostScript-based and TrueType-based fonts, and not the way these are brought into the browser—JavaScript vs. pure CSS, raw fonts vs. “real” Web fonts, etc.
The process of transforming font outlines into pixels is called rasterization. The operating system's text-rendering engine places the outline (ie the shape) of each character at the desired font size on a pixel grid. Next, it colours all the pixels whose centre is inside the outline (see image below).
The best way to deal with FOUT is to make the transition between the fallback font and web font smooth. To achieve that we need to: Choose a suitable fallback system font that matches the asynchronously loaded font as closely as possible. Adjust the font styles ( font-size , line-height , letter-spacing , etc.)
Fixed this issue for me, removed from my css file:
text-rendering: optimizelegibility;
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
