Font Stacks CSS3 Essential Training

Font Stacks CSS3 Essential Training

CSS, TUTORIALS, WEB

Font Stacks CSS3 Essential Training




In this Font Stacks CSS3 Essential Training lesson we are gonna learn add an extra fonts and call them to the particular element in the current project folder and files. In general every web developer should face this custom fonts on their projects to be added. We should always be ready to add them to our projects.
In some times the clients itself give their own unique fonts. But most time we have to find the fonts and add them to our project. We generally using four types of fonts in web development. Each standard has been supported by the major web browsers in the industry.
In Font Stacks CSS3 Essential Training, We can add a new font face at the beginning of our css file and we can call the font-family in our entire project where ever we want.
Consider our previous example file and it doesn’t shows any special effects in the title, and the result will be like this
Font Stacks CSS3 Essential Training
The general format to add the font face is,

The above shown is the general format to add a font in our css file. As first we have to name our font family name which is a unique to be used everywhere in the entire project. And followed by we have to set the resource path of the font file where we located.
Having the following css file and html file for your reference to identify how they are tie up together,

This is placed in the stylesheet file, and the following snippet is shows in the index.html file.

Before run the above code make sure you have the font file inside the fonts folder. And you can check the folder structure at here,
Font Stacks CSS3 Essential Training
After confirm the path and all the files are available then run the above code then you’ll got the result like this.
Font Stacks CSS3 Essential Training
The above shown is the general and one of the easiest method to add a custom fonts in our web project. Some times we need to link the src url form the CDN websites, and some time they must be deleted or temporarily blocked then we have to give a backup for those fonts.
In this kind of situation we are move to the font stack. Like consider the following example.

In the above example we use three fonts in the font-family. The browsers render this font-family attribute from left to right. First it checks the first name, and the second one ad keep on going. If the first src link is broke, then it looks forward the second one, if the second also broke then the check is going on.
There is no limit for the fonts to utilize over variety of HTML elements. We can also use them in the media queries too and almost anywhere at anytime.
We hope this lesson Font Stacks CSS3 Essential Training will gives you some knowledge about the Font stack and how to add a font to our web project and HTML pages.

Leave a Reply