About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done bachelor's in computer engineering from Gujarat Technological University. I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their career as a fullstack .NET developers.

Click here to know more about me

Lesson 2 - Part 7: 10 Important CSS properties: font-face & font-family

on

Font Face is not a CSS property but its a rule which defines the font name and the font files' url that is to be used across a website or a web application. The font face property is written as below:

Image 2.7.1 Syntax of font face

The font-face rule allows us to use custom fonts in our web page. Let us see how to integrate custom fonts on a webpage. 
I use https://www.fontsquirrel.com/ as it offers number of gorgeous fonts for free 😁.

Font Squirrel page looks like below:

Image 2.7.2 Font Squirrel homepage

Steps to integrate custom fonts

1. Download the font that you like from the font squirrel homepage (Image 2.7.2). I am downloading Quicksand as shown below:
            
Image 2.7.3 Downloading Quicksand Font Files

2.  Now, unzip the downloaded file which would look like below:

Image 2.7.4 Downloaded font files

3. Set the font-face rule for each Quicksand font file (Quicksand Bold, Light, Regular etc) by giving url and font family name and setting font-families for the HTML element for which the font is used as below:

Image 2.7.5 Setting font face rule and the font family


Image 2.7.6 Output after font integration and setting the font-families

This is how custom fonts are integrated. Now, try yourselves to integrate any other font by this method.

Subscribe to Be a full stack .NET developer by Email