Information, Web Design

Existing way to getting custom fonts in the website with the help of CSS @font-face

11 Aug 2011 No Comments

It is very common in the past years to get website limitation the use of “web safe” fonts. The designs look good, but how many people will see that font? In that case you need to installed that font on your computer, which is not possible for everyone, second option is we can use text rendered as graphics, but this awful for search engines (as they can’t read the text), and is a huge pain to update as the smallest change.

Another tool is called “SIFR”. SIFR uses JavaScript, when it render in your page and replaces html text into flash text that can be in whatever font you want. Its works, but to implement once, it causes a heavy processing load on the browser, it search text from your HTML and replace it with flash.

Using @font-face

@font-face is the best option for web designers to create beautiful web typography. It is incredibly simple to use. It only requires a CSS syntax for declaring a custom font is very simple rule which allows you to download a particular embed font from your server to render in the webpage.

Example of font embedding using @font-face

@font-face {

font-family: ‘MyWebFont’;

src: url(‘webfont.eot’); /* IE9 Compat Modes */

src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */

url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */

url(‘webfont.ttf’)  format(‘truetype’), /* Safari, Android, iOS */

url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ }

body {

font-family: ” MyWebFont “;

}

If you need to export the fonts in different formats, there is a font generator which allows you to generate various font formats from an existing font. Note: Most fonts do not allow to publishing or distribute on the internet. Font Spring offers professional fonts with @font-face support. You can buy licensed fonts individually and use freely on your sites.

Another way of using fonts without worrying about licensing issues is by using the fonts from service providers such as Typekit and Fontdeck. These service providers, the fonts are hosted on their servers and you have to pay a subscription/licensing fee to use the fonts.

@font-face is completely cross browser compatible with all major web browsers. @font-face has been  supported in Internet Explorer 4+; Chrome 4+; Mozilla/Firefox 3.5+; Safari/iOS 3.1+; Opera 10+.

So conclusion is @font-face is good and valuable, if you need to use your own custom fonts. Personally, I like Google Web Fonts because it is simple to implement and it loads very fast.

Previous Older Entries