There are many web developers who are starting out and don't know how to add custom fonts to their websites! I believe you have arrived at the right place. In this blog, I am going to explain to you how to import custom fonts to your website.
Adding a unique font to your website is a great way to make your design stand out online.
In this blog, I will walk you through the step-by-step process of adding any font to your website.
So, we are going to using Google Font to import custom fonts. So let's quickly go through the steps of importing the fonts.
As of April 2021, Google Fonts have 1052 font families, including 89 variable font families.
Step-1 Go to Google Font site
First of all, you have to go to the Google Fonts website, The link for the website is here fonts.google.com .
Step-2 Search for the desired font
Then you have to type the desire font name in the search box and press enter for search.
Step-3 Select the styles
After that, you have selected the style of the font. (Eg: Thin 100, Extra-Light 200, etc...).
Step-4 There are 2 ways to import the font
1) In HTML file
i) You have to use a link tag to import the font in HTML, else you
can copy the code in the box and paste that code inside you
HTML code.
ii) Now we have successfully added a custom font!! YAYY now we
just have to use it in the CSS property.
2) In CSS file In order to import font only using CSS then you have to click on @import instead of and copy the code inside it and paste it at the top of your CSS file.
Bonus Tip:
It is advised to use the link tag to import font in HTML instead of using @import in CSS because the HTML page is the first to load in the browser and so are the link tags, hence the font will load first but on the other hand, CSS file is loaded after the HTML file, hence decreasing the speed of importing font.