Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@font-face alias issues on PC

Just started using this technique and am having strange results on the PC side. Virtually every browser I preview this site in on a PC makes the font look totally horsey. Example:

On the Mac:

http://dropbox.smallparade.com/howto-mac.png

On a PC:

http://dropbox.smallparade.com/howto-pc.png

Anyone have experience with this issue? Is there a resolution? Does it have anything to do with how the fonts were created? Appreciate any help I can get. I used the font-face generator over at fontsquirrel.com.

like image 360
Brandon Durham Avatar asked Nov 06 '10 05:11

Brandon Durham


People also ask

What is the font face rule?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

How to use font face in CSS?

Definition and Usage With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore. In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

How do you use font faces in HTML?

The HTML <font> face Attribute is used to specify the font family of the text inside <font> element. Attribute Values: It contains single value font_family which is used to specify the font family. Several font family can be used by separating comma. Note: The <font> face attribute is not supported by HTML5.


1 Answers

That's a Hinting problem.

When you generate your font-face kit (like in FontSquirrel), you need to specify Hinting on the Expert options.

Choose Expert, and under Rendering, select:

Apply Hinting - Improve Win rendering.

like image 168
Gui Premonsa Avatar answered Oct 05 '22 21:10

Gui Premonsa