java.net member

Rechercher dans ce site

Showing posts with label Google Font API. Show all posts
Showing posts with label Google Font API. Show all posts

Google Font API/Directory in your Blog/Web Site/GoogleAppEngine etc.

>> 20 May 2010

This is not a specific JEE theme, but as this can add benefits to your site,I found it useful to add it in JEE section. Use it if like it.

Site: http://code.google.com/apis/webfonts/
Web font directory :  http://code.google.com/webfonts

The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

Benefits of the Google Font API include:

  • A choice of high quality open source fonts.
  • Works in most browsers.
  • Extremely easy to use.


The fonts in the directory are all released under open source licenses; you can use them on any non-commercial or commercial project.

Just a little example :
Say you want to use "Tangerine" font.

Between <head> and </head> of an html page add this link to a stylesheet

<head>
...
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
..
</head>

Add Between <head> and </head> of an html page a selector

This one will use the "Tangerine" font. I used here a custom class "ka", give your class any name you want


.ka {
  font-family: 'Tangerine', serif;
 
}

Use the newly added font

In any place in your html (between <body> and </body>
add for instance <p> that use this font

<p class="ka">Hello World!!!</p>

Note:
You can add several fonts in the stylesheet link.

You can add normal CSS properties in your custom class

Hello World !!!

Enjoy !

Read more...

Utiliser les fonts de Google dans votre Blog, Site,GoogleAppEngine etc.

Oui, le sujet n'est pas liée directement au développement, mais on a besoin aussi de tous les outils susceptible d'améliorer le fonctionnement ou même le look de sites.

Google Font Directory, ce sont des polices de caractères de très haute qualité à utiliser dans toutes sortes de pages Web.

D'abord les URL :
Site: http://code.google.com/apis/webfonts/
Web font directory : http://code.google.com/webfonts

Les avantages de Google Font API sont multiples, par exemple :

  • Open source
  • Compatibilité avec des navigateurs internet
  • Facile à utiliser
  • Il est possible de les utiliser dans des sites perso, comme des sites commerciaux.


Comment ça marche :
Nous utilisons dans cet exemple le font " Tangerine "
Entre les deux balises <head> et </head> d'un fichier HTML

Insérez un lien vers une feuille de style comme suite
<head>
...
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
..
</head>

Ajoutez aussi entre les balises <head> et </head> un selecteur, cette classe personnelle va utilliser le font "Tangerine". Donnez un nom de votre choix à cette classe (j'ai utilise " ka ")


.ka {
font-family: 'Tangerine', serif;

}

Utilisez " Tangerine " pour l'affichage
Dans votre page HTML et entre les deux balises <body> et </body>, utilisez la classe définie là-haut pour les balises <div>, <span>,<p> etc...

<p class="ka">Hello World!!!</p>

Et voilà !

Hello World !!!

Note:
Il est possible d'importer plusieurs fonts dans la même URL

Les proprietées CSS sont utilisables normalment dans avec ces polices de caractères.

Read more...

  © Blogger template Simple n' Sweet by Ourblogtemplates.com 2009

Back to TOP