These day I'm stuck with the design for my current project due to lack of beautiful fonts for website. So I dug around and find this article on http://tympanus.net . This is not a new problem but sometimes we have to waste time in doing this. And then I find it very interesting to see my website with some amazing fonts by using @font-face with many font kits provided on Font Squirrel. That's it! No more words, check it out!
The problem with web fonts is that nobody wants to use the ‘safe’ fonts and you need as much live text on your site as possible. So what’s a designer to do? Fortunately or unfortunately there are plenty of options.
Unique fonts are awesome and up until a year or two ago the only way to accomplish unique typography was to embed them in images on your site. As semantic markup becomes moreimportant to browser compatibility and search engine rankings, live text is more and moreimportant also.
This means that we need to master the art of web fonts and how to get them to render correctly. There is no one real rock-solid sure fire way to present unique fonts yet, but there are a lot of methods you can use to accomplish unique active type. I have tried a few different methods, but my favorites are:
- CSS @font-face
- Google fonts API and/or Kernest
- Font Stacks
@font-face
The CSS technique, @font-face, for embedding fonts into your website has been around since CSS2. The reason why its not the great fix for web fonts is that fonts are rendered differently in browsers and operating systems. Helvetica may render perfect on a Mac but look jagged and weird on a Windows PC. To be able to use @font-face correctly, you’ll need to embed fonts that are designed to be rendered correctly no matter the browser or operating system.
Proper @font-face fonts come in two flavors; free and premium. There are a lot of free web font sites that offer quality web fonts ready to be embedded in your design. But, if you looking for very high quality and familiar web fonts it will cost you, rightly so.
Implementation
Implementing @font-face in your style sheet is really easy. Just download your chosen font, add it to your file system and add this chunk of code to your style sheet and reference the embedded font via the font-family property:
1 | @font-face{font-family: Quicksand; src: url('Quicksand.otf');} |
2 | h3{font-family: "Quicksand", Gil Sans, arial, sans-serif;} |
Resources
The best website to find quality free web safe fonts to use with the @font-face property isfontsquirrel.com. But if you are interested in premium fonts check out these sites
The Pros and Cons
Pros:
- Quality fonts – no weird rendering problems
- A couple lines of code
- No third party tools or apps
Cons:
- No free licensed standard fonts
- You must host the font
- Still some font-weight rendering issues in some browsers
Google Fonts and Kernest
Another great option for adding unique fonts to your design is allowing someone else to handle the license and hosting for you. The two best options for this are the Google fonts API and Kernest. These services are great for web fonts because they take care of all the work for you and they are free. Wahoo! Well, not exactly, there are some on Kernest that require purchase, but most are free.
There is no need to download and host a font, no need to add extra code, and there is no need to worry about whether these fonts render correctly. The only real downside to this method is that their font libraries are still a bit small, but growing day by day.
Implementation
All you have to do is find the font you like from the gallery, copy the embed link and add it to the head of your HTML document. Then you can access the font via the font-family property in your style sheet:
1 | <head> |
2 | <link href='http://fonts.googleapis.com/css?family=Calligraffitti'rel='stylesheet' type='text/css'> |
3 | <style> |
4 | h1 { font-family: 'Calligraffitti', arial, serif; } |
5 | </style> |
6 | </head> |
The Pros and Cons
Pros:
- No – or little – cost
- No download or hosting of font files
- Minimal rendering issues
Cons:
- Small libraries
- Lack of real high-quality standard fonts
Font Stacks
Font stacks aren’t dead, they are alive and well – and a great alternative if you are looking for unique or standard fonts. In the majority of cases you don’t need some crazy ultra custom font for a web design, and with Apple, Microsoft and Linux adding more fonts to their core libraries, the font stack option can still be a very viable alternative for presenting type on the web. But to tap into these fonts, we’ll need to know how to build a good, solid font stack – or ‘borrow‘ one from somebody else.
Implementation
Building a font stack is pretty simple. A font stack is just basically a list of fonts that you want the browser to render from the local machine’s library. A font stack is defined using the CSS font-family property. You can define as many choices as you want with the first choice being the perfect font you want your website to display in, and the last being the default font-family variant, whether serif or sans-serif.
Examples (from css-tricks.com… I love these font stacks)
|
Resources
There are a lot of tutorials and snippets for building font stacks. My favorite of all time is the font stacks snippets from css-tricks.com, these are really in depth and well built font stacks that are grouped by family. If you looking for a Helvetica or Georgia based font stack, they will have it.
Here are some other resources for your viewing pleasure:
The Pros and Cons
Pros:
- Easy to implement
- No hosting, pull font file directly form local machine
- Fastest load speeds
Cons:
- Limited unique fonts
- Font will not look exactly the same on all browsers
Use ‘em all
Creating a really unique font look can enhance the design greatly. In some cases a good header font can actually complete the entire web site. When beautifying your web site you’ll probably actually want to use more than one technique.
If you want a really unique header font use @font-face or and embedded font from Kernest and then compliment the new header with a great looking paragraph font using a font stack from css-tricks.com. Whatever the case, play around with these techniques and see what works best for you and your designs.
Some Great Examples
I would feel awful if I didn’t leave you with some example, so here’s a few awesome examples of sites that use active text.
No comments:
Post a Comment