Objective and outcomes

In this tutorial we are going to learn about using Custom fonts in CSS. To use custom font you have to download font's woff and truetype files which are used to declare font in CSS sheet. Click here to download font files. Example for the same is shown below-

This is custom web font!!

CSS stylesheet:


/* Include the webfont through a @font-face declaration */

@font-face {
font-family: 'Sofia';
src: url('fonts/sofia-regular-webfont.woff') format('woff'),
url('fonts/sofia-regular-webfont.ttf') format('truetype');

font: normal 36px Sofia, serif;
padding:20px 0;


HTML code:

<h2>This is a custom web font!!</h2>

@font-face is a rule in CSS which is used by te developers to declare user their custom fonts and use them. To do this first the font is given a name by using font-family property and then providing the source of the font.