How to use custom web fonts in your website

Nowadays website design turned in different dimensions. Many websites already have amazing designs, font is most important to create the stunning web design. Previously all website only uses system fonts; if they need any custom font design then they use the images. But after released the CSS3, designer use custom fonts for develop the websites. This will be reducing website loading speed and improve website performance. Many website provides free fonts download for designers, this post explain about to use custom web font to your website.
 
custom fonts for websites
 

Use custom fonts in website

Option 1:

Download custom web fonts from fontsforweb. Upload the custom font in your web server and make the code as per the following example:

 

custom.css

@font-face {
font-family: ‘myFirstFont’;
src: url(seguibl.ttf);
}

@font-face {
font-family: ‘mySecondFont’;
src: url(LEVIBRUSH.ttf);
}

.custfont1{
font-family: ‘myFirstFont’;
font-size:30px;
}

.custfont2{
font-family: ‘mySecondFont’;
font-size:30px;
}

 

font.html

<html>
<head>
<title>Custom font style</title>
<link rel=”stylesheet” type=”text/css” href=”custom.css”>
</head>
<body>
<div class=”custfont1″>This is First custom font </div>
<div class=”custfont2″>This is Second custom font</div>
</body>
</html>

 

Download sample source file

 

Option 2:

Google provide the custom web font by using web links, in this method you don’t need to download any custom fonts. You can just add the CSS links in your website header area. Anyone can use Google web font by using following steps:

  1. Go to Google web font
  2. Browse and select font
  3. Click the Quick-use button
  4. google web font

  5. Then you can select the font Style and copy and paste the CSS links in your website header area
  6. google web font links

  7. Now add the custom font in your CSS

 

Example for how to use the Google Web font in website:

<html>
<head>
<title>Google Custom font style</title>
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’>
<style>
.custfont1{
font-family: ‘Oswald’;
font-size:30px;
}
</style>
</head>
<body>
<div class=”custfont1″>This is Google custom font </div>
</body>
</html> 

 

The following two tabs change content below.

Jey Ganesh

Jey Ganesh is a Blogger of designdug.com, Here you can find all about design tips and tricks. You can also engage with designdug via email: admin@designdug.com

Jey Ganesh

Jey Ganesh is a Blogger of designdug.com, Here you can find all about design tips and tricks. You can also engage with designdug via email: admin@designdug.com

You may also like...

2 Responses

  1. Abhijit Bangal says:

    You have given some good examples that are really very helpful. I was searching for some tutorials and I guess I found one here. Actually, when the page is at 100%, the fonts on my site looks too small. So, I have to zoom it. How do fonts on my site look to you?
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *