How to use special font in css?

Basically some special font are used for designing website whose visible in all viewers system. Now you can use some special font for making website more attractive.

@font-face  is a tag used to add special font in website

Please follow some steps to using special font in css

1- upload your ttf,eot,woff fonts in server.

2- attach this font to your css file

@font-face {
	font-family: myFirstFont;    // make a name of font  this will use to add font family in css
        src: url(fontfile.woff);   // path of font file
           }

3- make your tag

div, h1
{
font-family:myFirstFont;
}

use this tag to your webpages.

The second ways is to use google API’s for attaching font. but this will take some downloading time when browsing website.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

https://developers.google.com/fonts/docs/getting_started#Quick_Start

Leave a Reply

Your email address will not be published.