CSS3 Web Fonts

by Joshua McNeese

HTML

<h1 id="title1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>


<h1 id="title2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>


<h1 id="title3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>


<h1 id="title4">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Sarina|Fascinate+Inline|Cinzel);

@font-face {
    font-family:'Droid Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Droid Sans'), url('http://playground.html5rocks.com/samples/html5_misc/Droid_Sans.ttf') format('truetype');
}

h1 { 
    font-size: 2em;
}

#title1 {
    font-family: "Droid Sans", sans-serif;
}

#title2 {
    font-family: "Sarina", cursive;
}

#title3 {
    font-family: "Fascinate Inline", cursive;
}

#title4 {
    font-family: "Cinzel", serif;
}