Sunday, January 15, 2012

Using Google web fonts in your web page: Hundreds of free, open-source fonts optimized for web!


About Google Web Fonts

Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.

Our goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.

The API service runs on Google's servers. They are fast, reliable and tested. Google provide the service free of charge. It is possible to add Google Web Fonts to a website in seconds.

A web built with web fonts is a web that is more beautiful, more readable, more accessible and more open.

Open Source Fonts

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even improve or customize them and collaborate with the original designer. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.

We are working with designers around the world to publish quality typeface designs that are made for the web. If you design fonts and would like to contribute your own designs, please get in touch. Fonts in the directory can become very popular and seen by millions of people every day.

The Google Web Fonts Team


It's very easy to use any Google web fonts on your page:

Visit Google web fonts http://www.google.com/webfonts, click "Start choosing fonts" to start.
Google web fonts

Scroll to choose the fonts, for example: Flavors. Click Quick-use.
Choose fonts

Now your fonts is prepared.
Integrate the font in your page

scroll down to "3. Add this code to your website:", copy the code as the first element in the <head> of your HTML document.
<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>


Add the font name to your CSS styles just as you'd do normally with any other font.

h1 { font-family: 'Flavors', cursive; font-weight: 400; }


Example:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>
<title>Google Web Fonts</title>

<style>
h1 { font-family: 'Flavors', cursive; font-weight: 400; }
</style>
</head>
<body>

<h1>Mobile-Web-App: Google Web Fonts</h1>

</body>
</html>

Example of using Google web fonts

next:
- Using Android fonts on webpage

No comments:

Post a Comment