Typography is one of the important weapon for the designer to use, but when it comes to web, a designer is restricted with web-safe fonts only, because a font is an operating system resource, not a browser resource. You can see any font in your browser, which is installed in your machine. But if your visitors don’t have the same font installed, their browser will display default font. So, a designer is at the mercy of the user’s browser when the page is displayed.
Let’s go beyond web-safe fonts
There are number of font-replacement techniques. I would personally recommend for @font-face as it can be used with CSS only. There is not any dependency of plug-in or scripting. So, in this post I will detail out only @font-face technique. You can read small description of many font replacement techniques or directly jump to @font-face technique.
FIR – Fahrner Image Replacement
It uses the background-image to replace text on web pages and hides the actual text using display:none or visibility: hidden and overlay an image.
sIFR – Scalable Inman Flash Replacement
Google WebFont API
It uses CSS3’s @font-face to add web fonts to your site. Currently it is limited to only 18 different font-families. It is simple to use, you only need to do is simply hotlink to their style sheet link and call the font in CSS.
List of font-replacement technique is long – let’s stick with one of the simple/good technique in details.
This attribute allows the designers to specify a link to a custom font, which can be in your web server. It will be installed by the browser when the page is rendered. One problem with this technique is different browsers support different font formats.
Internet Explorer – .eot
Firefox and Safari – .otf and .ttf
Opera and Chrome – .svg
If you want cross browser font support, you will need the fonts in several formats.
Let’s create different browser support font formats.
Search any free downloadable font in your machine, before using it for commercial use do some research on that font first as some designer don’t allow their fonts to be embedded. Please respect the designer’s wishes to avoid any potential copyrights problem. In order provide different browser support you can use @font-face Kit Generator. It’s very simple just click the “Add Fonts” and upload the font with all its weights. Now you are done will all the required font formats.
Now use these font formats for different browser using CSS only
src: url(' coronet-webfont.eot'); <span class="comment-text">/* IE9 Compatibility Modes */
src: url('coronet-webfont.eot?') format('eot'),<span class="comment-text"> /* IE6-IE8 */
url('coronet-webfont.woff') format('woff'), <span class="comment-text">/* Modern Browsers */
url('coronet-webfont.ttf') format('truetype'),<span class="comment-text"> /* Safari, Android, iOS */
url('coronet-webfont.svg#webfontc3BK2Qa1') format('svg');<span class="comment-text"> /* Legacy iOS */
Concise steps to Use @font-face for custom fonts in web.
- Download/purchase any font for your web.
- Convert it in different format for browser compatibility.
- Use it with css only as given above.
Some Useful Resources