Now you may have known all about of the CSS3 Backgrounds with reference of previous chapter. Now in this chapter we will learn about how to declare a font in CSS3.

CSS3 Fonts

A CSS3 Font is an advance feature of CSS3 which is used to improve the web designing. With the help of CSS3 Fonts feature we can create different types of font style.

The rule for defining the Fonts is only We have to declare a name in the first line of starting css properties. The font file can found in ttf(True type font) format or otf(Open type font) format.

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	<title>Title Name will go here</title>
		<link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda|Ropa+Sans|Butcherman|Rochester|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
		<style>
			
			.font1
			{
				font-family: 'Cherry Cream Soda', cursive;
				font-size: 14px;
				color: yellow;
				line-height: 1.3em;
			}
			
			.font2
			{
				font-family: 'Ropa Sans', sans-serif;
				font-size: 14px;
				color: green;
				line-height: 1.3em;
			}
			
			.font3
			{
				font-family: 'Butcherman', cursive;
				font-size: 14px;
				color: red;
				line-height: 1.3em;
			}
			
			.font4
			{
				font-family: 'Rochester', cursive;
				font-size: 14px;
				color: blue;
				line-height: 1.3em;
			}
			
			.font5
			{
				font-family: 'Open Sans Condensed', sans-serif;
				font-size: 14px;
				color: pink;
				line-height: 1.3em;
			}								
			
		</style>
	
    </head>
    <body>

		<p class="font1">THIS LINE IS CONTAINING THE DIFFERENT FONT</p>
		<p class="font2">THIS LINE IS CONTAINING THE DIFFERENT FONT</p>
		<p class="font3">THIS LINE IS CONTAINING THE DIFFERENT FONT</p>
		<p class="font4">THIS LINE IS CONTAINING THE DIFFERENT FONT</p>
		<p class="font5">THIS LINE IS CONTAINING THE DIFFERENT FONT</p>

    </body>
    
</html>

Download