CSS Font Face

Note: Before reading this article, you need to know about CSS Font Family. I assume you know about the CSS font family.

Font Face is a great feature of CSS. Think You like a font you want to use, what next? Yes, that's why Fontface.

Fontface is written in CSS. And you have to write as follows:

@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
 ,url('MyFavoriteFont.eot'); /* For IE */
}

font-family: FontFace; You can name your font family with this. You can give any name instead of FontFace. And later you can use the CSS font the way Family uses it: font-family: FontFace;

Add the url of your font with src: url (‘MyFavoriteFont.ttf’). IE does not support ttf [True Type Font]. For that you have to use eot (Embedded OpenType) font. For this we have added utl of eot font with a comma. If you do not have eot font, then you can get it by doing a little search on Google.

Our fontface is ready. Now we can use it anywhere. As much as you want.

To use, you have to write the font family as you write it

.myDiv
{
font-family:FontFace;
}

And the whole example:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
 ,url('MyFavoriteFont.eot'); /* For IE */
}

.myDiv
{
font-family:FontFace;
}
</style>
</head>
<body>

<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>

</body>
</html>

Enter the name of your font in place of ‘MyFavoriteFont.ttf’. Note: You must enter the url where you will upload the fonts. Now if you open a directory with fonts and put the fonts in it, you have to type ‘fonts / MyFavoriteFont.ttf’ etc.
If you don't want to bother so much, you can use it in a simpler way. There are many fonts uploaded to Google Web Fonts. http://www.google.com/fonts/

You can use it by going here and selecting the font of your choice and clicking on the Quick Use button. Add the following link to the header section of your site:

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

Nothing more to do. Then just add the name of the font to the fontfamily: font-family: ‘Caesar Dressing’, cursive;

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>
<style>
.myDiv
{
font-family: 'Sonsie One', cursive;
text-align:center;
margin-top:10%;
color:#808080;
}
</style>
</head>
<body>

<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>

</body>
</html>

You can also read:

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @mrezaulkarim_

Blog

Rezaul karim

Join Our Newsletter. No Spam, Only the good stuff.

Related