In the Font Squirrel Expert options, make sure to set the ‘TrueType Hinting’ option to ‘Keep Existing’. Either of the other options will cause the TrueType instructions (hints) to be modified, which will in turn affect the rendering of the font. Alternatively, if you’re happy with the rendering of the font directly from GWF, you … Read more
Be careful with “free” fonts on the web. Many are just copies of protected fonts with their copyright notices removed. If you want to make sure, buy a font from one of the large foundries like fonts.com or myfonts.com. Make sure you read their license. For example, if you buy a font, you are almost … Read more
First, I’ll clear something up about Google’s offering. It will actually load the smallest format your browser can handle. WOFF offers small file sizes, and your browser supports it, so it’s the one you see. WOFF is also fairly widely supported. However, in Opera for example, you’ll probably get the TrueType version of the font. … Read more
As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera. Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X. -moz-osx-font-smoothing: grayscale; This should … Read more
Give Icomoon a try. You can upload your own SVGs, add them to the library, then create a custom font combining FontAwesome with your own icons.
Yes, you can use the CSS feature named @font-face. It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time. You declare it in the CSS like this: @font-face { font-family: Delicious; src: url(‘Delicious-Roman.otf’); } @font-face { font-family: Delicious; font-weight: … Read more
For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which “flattens” the @import’s, then you create another problem with web fonts: … Read more
Answer in 2019: Only use WOFF2, or if you need legacy support, WOFF. Do not use any other format (svg and eot are dead formats, ttf and otf are full system fonts, and should not be used for web purposes) Original answer from 2012: In short, font-face is very old, but only recently has been … Read more