@font-face fonts can be used in two ways, by hosting them on your server or having them hosted on the Google servers. Unfortunately for now, you can’t upload any font you want in the Google collection of web fonts but there are a few that are really neat and that can be used to make your web designs’ typography look modern. I have selected over 20 of these Google web fonts that are elegant and are commonly used on the sites that are newly released or newly redesigned. After these 22 Google web fonts, I also added 7 fonts that aren’t for the moment in the Google web fonts directory, but which you can host on your server.
To use, add this to your website:
<link href='http://fonts.googleapis.com/css?family=Font-name' rel='stylesheet' type='text/css'>
The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Font name', sans-serif;
Besides the regular font preview in a large size, I also added a preview of a paragraph containing that specific font because you can’t really tell how the font will look having 16px size in a paragraph by seeing it in 40px.
Enjoy these and use wisely. Be careful not to overcrowd your site with too many fonts cause it might cause the page load time to slow down considerably.
Open Sans
Droid Sans
Oswald
Lobster
Droid Serif
Yanone Kaffeesatz
Lora
Ubuntu
Crafty Girls
Arvo
PT Sans Narrow
Lato
Marck Script
Open Sans Condensed
Cabin
Francois One
Coming Soon
Josefin Sans
Play
Raleway
Abel
Anton
Amaranth
Coda
Quicksand
Ropa Sans
To implement the following 7 fonts, you need to do declare them a bit different, this time not in your page but directly in your CSS:
@font-face {
font-family: Fontname;
src: url(../assets/fonts/Fontname.otf);
And then insert it like a regular font in whatever div you desire:
#abracadabra {
font-family: Fontname, sans-serif;
}
Capsuula
Bebas Neue
Cicle
League Gothic
OSP DIN
Communist
Mido
