Selection Of 29 @font-face Fonts To Use On Your Websites

@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

Open Sans Font-Face Free Download

Open Sans in Paragraph Font-Face Free Download

Droid Sans

Droid Sans Font-Face Free Download

Droid Sans in Paragraph Font-Face Free Download

Oswald

Oswald Font-Face Free Download

Oswald in Paragraph Font-Face Free Download

Lobster

Lobster Font-Face Free Download

Lobster in Paragraph Font-Face Free Download

Droid Serif

Droid Serif Font-Face Free Download

Droid Serif in Paragraph Font-Face Free Download

Yanone Kaffeesatz

Yanone Kaffeesatz Font-Face Free Download

Yanone Kaffeesatz in Paragraph Font-Face Free Download

Lora

Lora Font-Face Free Download

Lora in Paragraph Font-Face Free Download

Ubuntu

Ubuntu Font-Face Free Download

Ubuntu in Paragraph Font-Face Free Download

Crafty Girls

Crafty Girls Font-Face Free Download

Crafty Girls in Paragraph Font-Face Free Download

Arvo

Arvo Font-Face Free Download

Arvo in Paragraph Font-Face Free Download

PT Sans Narrow

PT Sans Narrow Font-Face Free Download

PT Sans Narrow in Paragraph Font-Face Free Download

Lato

Lato Font-Face Free Download

Lato in Paragraph Font-Face Free Download

Marck Script

Marck Script Font-Face Free Download

Marck Script in Paragraph Font-Face Free Download

Open Sans Condensed

Open Sans Condensed Font-Face Free Download

Open Sans Condensed in Paragraph Font-Face Free Download

Cabin

Cabin Font-Face Free Download

Cabin in Paragraph Font-Face Free Download

Francois One

Francois One Font-Face Free Download

Francois One in Paragraph Font-Face Free Download

Coming Soon

Coming Soon Font-Face Free Download

Coming Soon in Paragraph Font-Face Free Download

Josefin Sans

Josefin Sans Font-Face Free Download

Josefin Sans in Paragraph Font-Face Free Download

Play

Play Font-Face Free Download

Play in Paragraph Font-Face Free Download

Raleway

Raleway Font-Face Free Download

Raleway in Paragraph Font-Face Free Download

Abel

Abel Font-Face Free Download

Abel in Paragraph Font-Face Free Download

Anton

Anton Font-Face Free Download

Anton in Paragraph Font-Face Free Download

Amaranth

Amaranth Font-Face Free Download

Amaranth in Paragraph Font-Face Free Download

Coda

Coda Font-Face Free Download

Coda in Paragraph Font-Face Free Download

Quicksand

Quicksand Font-Face Free Download

Quicksand in Paragraph Font-Face Free Download

Ropa Sans

Ropa Sans Font-Face Free Download

Ropa Sans in Paragraph Font-Face Free Download

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

Capsuula Font-Face Free Download

Bebas Neue

Bebas Neue Font-Face Free Download

Cicle

Cicle Font-Face Free Download

League Gothic

League Gothic Font-Face Free Download

OSP DIN

OSP DIN Font-Face Free Download

Communist

Communist Font-Face Free Download

Mido

Mido Font-Face Free Download

Enjoyed this article? Subscribe to read more like it

 

Sponsors