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.
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-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
<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>
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:
- Go to Google web font
- Browse and select font
- Click the Quick-use button
- Then you can select the font Style and copy and paste the CSS links in your website header area
- Now add the custom font in your CSS
Example for how to use the Google Web font in website:
<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>
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
Hi Abhijit,
Thanks for your comments.
I reviewed your page, font size is fine for everyone. Even though if you would like to increase font size then you can install the WordPress Zoom plugin