Hello Readers!

Fonts — What are they? The way we write text, the way we want text to appear to a user. i.e. , it is  the style in which letters, numbers, punctuation and special characters are visually presented.

Fonts are not only used in websites. The big giant companies use a font to distinguish themselves from their competitors in the market because logo is an important part of a brand's identity.

We have many Google provided fonts that are frequently used in our day-to-day visited websites. But sometimes, we want to add more interactiveness and appeal to our page. That is when we put to use Custom Fonts.

Custom Fonts cannot be directly put to use in the HTML file. It is done by @font-face rule.

This rule allows the custom fonts to load on our webpages. After including this rule, it instructs the browser to download the font from where available, then use it as mentioned in the custom CSS .

Without this rule, we are limited to the fonts provided by Google Fonts or those that can be loaded on the user's computer directly, and this varies with the system that the user is using.

CSS Font Family Property

The CSS font-family property is basically a prioritised font.

Broadly, a browser accepts 3 types of fonts: serif, sans-serif and monospace.

A “serif” has a little stroke on the tips, edges and corners of the alphabets.

“Sans-Serif” implies “without serif” i.e. these do not have strokes on the tips and edges.

“Monospace” letters and symbols have the same width.

A font must be pre-installed before it can be used. It gets impossible for the designers to control the look of a page. The solution is to install a custom font in your webpage.

 The CSS3 Solution

The CSS3 @font-face rule requires to specify 2 things: the name of a font and the URL of where it can be found. Different browsers support different font formats, including : ttf, otf, eot, svg, woff and many more.

To implement the @font-face rule, follow these steps:

• Obtain or create your own custom font file
• Upload the font files to your server
• Add the following code to your CSS file

@font-face {
    font-family: myFancyFont;
    src: url('myFancyFont.ttf'),
    url('myFancyFont.eot');
 }

• Include the new font in your CSS

p { 
    font-family: 'myFancyFont', Times, serif; 
 }

Problems with the rule

The main drawback is the older browsers don’t support this, and even if some do, it is only a few specific fonts. Fortunately, the rule is supported on modern browsers.

Happy Coding :)