Custom Fonts using Google API

For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images.

Google Font API

Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard web fonts.

The major issue with Cufon is it renders the text as images

Follow up:

Because of this, i was trying to apply a custom font, to use it in my website. I mean by saying a custom font: upload font to my website to let visitors see this font. This custom font could be any font face, or font family.

CSS 2 and CSS 3 gave browsers the ability to download and use TTF file formats.
But as we all know Internet Explorer “IE” don’t accept that.

The CSS code used to apply the custom font as following:
```
<style type="text/css">
@font-face {
font-family: CustomFont;
src: local('CustomFont'), url('myFont.ttf') format('truetype');
}
</style>
```
The above code won’t work on any version of Internet Explorer. Why is that?
And how to use this custom font on the buggy Internet Explorer?

1) After searching how to use custom fonts on IEs, I found that Internet Explorer does not accept TTF file types. IEs only accept EOT file types.

2) IE 6 and IE 7 also don’t understand what “CLEARTYPE” means.
What to do then?

Internet Explorers (IE6, IE7 and IE8) accept EOT file types so, i wrote this code:
```
<style type="text/css">
@font-face {
font-family: 'Custom Font';
src: url("myFont.eot"); /* FOR IEs */
src: local('Custom Font'), url('myFont.ttf') format('truetype'); /* for other web browsers */
}
</style>
```
This code works.. It was tested on IE6, IE7, IE8, FireFox 3.6, Safari 4.
Now you can use it with CSS in FONT, FONT-FAMILY like this:
```
<style>
.myStyle{
font-family: 'Custom Font';
font-size:14px;
}
</style>
```
Author: Freelancer ID
Ref: Google Fonts API
Demo: Click Here

Related Posts:
- No related posts found
GD Star Rating
loading…
August 10th, 2010 | Blue | 3 Comments | Tags: google font api

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

3 Responses and Counting...

Site Help 08.10.2010

Site Help New Post – Custom Fonts using Google API. Read it now at http://bit.ly/c15rwJ

GD Star Rating
loading...
GoogleAPI Services

Site Help New Post – Custom Fonts using Google API. Read it now at http://bit.ly/c15rwJ

GD Star Rating
loading...
Tweets that mention Custom Fonts using Google API | Site Help — Topsy.com

[...] This post was mentioned on Twitter by GoogleAPI Services, New Post – Custom Fonts using Google API. Read it now at http://bit.ly/c15rwJ [...]