What is @ font-face, how to use @ font-face in CSS, and how to use it in CSS

@ Font-face is a CSS rule that allows you to enter your font to appear on the website, even if the specified font is not installed on the visitor's computer.The most important thing about this rule is that it opens a brand new world for designers.You can use any font you like.

Why is it awesome?

As I said, @ font-face opens a new world.Now, we canA brand new way to use typographical.This is why you see the web design elements and higher integration of the font layout on so many unique websites.

In addition, as a solution, a Custom font is displayed, and text on images can help search engine optimization.

How to Use @ font-face

The following syntax shows how to use @ font-face.First, define the font of the name and description provided by the new font.

@ Font-face{Font-family:Deliciousroman;SRC:URL ('HTTP: // www.font-face.com/fonts/delicious/delicious-roman.otf ');}
 

Then you reference it.

 
P{Font-family:Deliciousroman, Helvetica, Arial, sans-serif;}
 

That's it.

In the previous example, external sources are used.However, if you store the font file on your server, you can refer to the following methods:

@ Font-face{Font-family:Deliciousroman;SRC:URL ('... /Delicious-Roman.otf ');}
 

In addition, there are three other font attributes that you should know.FirstFont-stretch, The font you can set will be stretched, "normal" is the default.In addition, there is a font style, so that your font is oblique or italic.Finally, there is also the font weight, and the last font is bold, you can set it yourself

@ Font-face{Font-family:Deliciousroman;SRC:URL ('... /Delicious-Roman.otf ');Font-stretch:Condensed;Font-style:Oblique;Font-weight:Bold;}
 

 

Suggestions

Font rendering is tricky-especially for old mobile browsers.You should always test and support as many devices as possible.The faster the problem is found, the better.

Finally, remember,Using many different fonts may slow down your websiteIt takes time to load all these fonts!

Browser compatibility

Not all browsers support @ font-face!

Currently, @ font-face supports

• Firefox
• Opera
• Chrome
• Safari
• Internet Explorer 9

Are you sure you want to say that he does not support browsers earlier than ie9? Don't worry. When the old browser uses @ font-face,Different browsers support specific font files.

• Internet Explorer: EOT
• Mozilla Browser: OTF, TTF
• Safari: OTF, TTF, SVG
• Opera: OTF, TTF, SVG
• Chrome: TTF, SVG

@ Font-face Resources Font squirrel

Font squirrel is a great website and you should be very familiar with it.Font squirrel is a free set of premium commercial fonts for you to download.Most importantly, they have the @ font-face toolkit component and the @ font-face toolkit generator.The font squirrel toolkit provides you with different Font types, Each browser you need to support.

@ Font-face Toolkit

The font squirrel kit is a ready-made toolkit that includes multiple font formats, CSS and HTMLCode.All you have to do is select a font, download the toolkit, and copy the code.This is simple ,.Most importantly, they have a huge choice filled with huge fonts.

@ Font-face toolkit Generator

On the other hand, you have a toolkit builder that you upload your own fonts, which provides you with all the code you need.Because it creates a new toolkit for your font.All you have to do is download the new kit and copy the code to your website.It is that simple.However, when using your own font, make sure you have the right to use it-not all fonts are copyrighted

Google font

Google font is Google's API. You must select a set of fonts used on your website.All fonts are free and open source.Their choice is quite large, including many great fonts.You can also choose what you like.Once you select your font, paste the code snippet you provided to your website.Google allows you to select different codes, such as importing CSS to your

When talking about Google fonts, it must be an easy-to-use service.One thing you need to know: it will tell you the load of the font you selected on the loading time of your website.

Typekit

Typekit is another service with a collection of fonts-although they are a paid service.They have been committed to making @ font-face easier to implement.Their prices seem fair and many people use it because they have a magnificent collection of great fonts for you to use.There is no authorization you don't have to worry about if you use their services-they take care of you.They also work with many font manufacturers to provide you with the latest and best fonts.

 

Link to this article: What is @ font-face and how to use it in CSS