4 ms·
You don't have to use a service like Typekit to use a pretty webfont. The advantage Typekit has is that it gives you access to a lot of font choices to use (whi
by tdupree 16y ago
You don't have to use a service like Typekit to use a pretty webfont. The advantage Typekit has is that it gives you access to a lot of font choices to use (which you wouldn't otherwise have access to) and hosts/serves up the fonts for you.
Sites not using Typekit are most likely just using their own @font-face solution and hosting the fonts on their own server (which can also be a faster solution than loading in 3rd party font solutions).
Never use fonts and just hope a user might have it. It's not too hard to roll your own solution for serving up pretty fonts using @font-face. You will need to read up on it to learn the ins and outs, and what sort of goofy idiosyncrasies exits that you need to deal with.
I would recommend using the @font-face generator from fontsquirrel.com (http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator). This helps you take a font you want to use and prepare it for the web, creating all the different font file types, as well as creating the css you need to use to embed the font for use.
When you use the font, be sure to use it as part of a font-family, so that you can plan what fonts to use as a fallback in case your @font-face declarations don't work out.
Understand that your font will be rendered differently between various browsers and operating systems. Sometimes using a css declaration like text-shadow (text-shadow: #FFF 0px 0px 1px;), and matching the text-shadow color to the background color the text is on, can help smooth out jaggies on the rendered font (works well for webkit browsers), YMMV. Definitely check out how your font looks in all the major browsers, as well as different OS platforms. For instance, I have found Windows XP to render some @font-face fonts much worse than say Windows 7.
Just know that things aren't quite perfect yet with @font-face, so think long and hard about using it in a production environment, and really test all platforms, browsers, etc to see how it looks. Understand how your choice to use a custom font might hurt readability for large blocks of small-sized text (like a blog post) because of rendering issues. Also, Remember to use custom fonts responsibly, you really shouldn't need more than 1 (2 max) custom fonts on a page. Some people get a little carried away.
Some free fonts you can use online. NOTE: Always check the font license to see if you are allowed to use it on your site. If you plan to make a profit on your site, always check to see if the font can be used commercially!:
http://www.josbuivenga.demon.nl/ http://www.josbuivenga.demon.nl/
http://code.google.com/webfonts http://code.google.com/webfonts
Recommended reading (these should help you get in the head space of what you need to do, and what the @font-face landscape looks like right now):
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://paulirish.com/2009/bulletproof-font-face-implementati...
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-...
http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/ http://www.evotech.net/blog/2010/01/font-face-browser-suppor...
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ http://blog.themeforest.net/tutorials/how-to-achieve-cross-b...
- deleted 16y ago[deleted]
- deleted 16y ago[deleted]
- biznickman 16y agoAwesome response ... thanks a million for taking the time! Update I spoke with the developer behind Forrst who told me that he isn't using the method you've described. He says "those are in there for if it's on the users system. If not there are (less good looking) fallbacks." Yikes!
- tam7t 16y agoLots of information there, I'd just like to throw my support behind google webfonts. It's very easy to use: http://code.google.com/webfonts http://code.google.com/webfonts
- mambodog 16y agoI'd like to second the recommendation of the fontsquirrel.com @font-face generator. Seems to work very well across all testing systems I can find.
- Staydecent 16y agoFontspring(http://www.fontspring.com/ http://www.fontspring.com/) is a service, very similar to Fontsquirrel(perhaps done by the same people, but can't back that claim up). Fontspring offers @font-face licensing for professional fonts. I just used it because they have the very awesome Franklin Gothic family. It's also rather inexpensive($10-$20 avg perhaps) for unlimited domains. I prefer their model over something like TypeKit: Less restrictions and one-time-only payments.
- joshuacc 16y ago"Never use fonts and just hope a user might have it." I would question that statement. Specifying fonts a user "might have" is the entire basis of normal CSS font selection. There's absolutely nothing wrong with specifying a somewhat unusual first choice. That's what fallbacks are for! For instance: font-family: "Adobe Myriad Pro", Myriad, Georgia, Times, Times New Roman, serif; Just make sure that you order them from most desirable to least desirable and it will display the best installed font.