Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 28, 2021 03:10 pm GMT

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_


Original Link: https://dev.to/mrezaulkarim/css-font-face-2i7l

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To