DEV Community

loading...
Cover image for Importing custom font in HTML and CSS

Importing custom font in HTML and CSS

Sumeet Yadav
Full Stack Web Developer, Tech and Flight Simulator Enthusiast.
ใƒปUpdated on ใƒป2 min read

There are many web developers who are starting out and don't know how to add custom fonts to their website! I believe you have arrived to the right place. In this blog I am going to explain 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 for adding any font to your website.

So, we are going to using Google Font to import custom fonts. So let's quickly go thought 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 https://fonts.google.com/ .
Alt Text

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.
Alt Text

Step-3 Select the styles
After that you have select the style of the font. (Eg: Thin 100, Extra-Light 200 etc...).
Alt Text
Step-4 There are 2 ways to import the font
1) In HTML file
i) You have to use 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 in the CSS property.
Alt Text

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.

Alt Text

Bonus Tip:

It is advise to use 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.


Do visit the community made by me and my friendย @shreyazz for more amazing and informative stuff, and if you wanna recommend something or give feedback, feel free to comment๐Ÿ˜‡!

CodeBox's handles : https://linktr.ee/CodeBox

Discussion (7)

Collapse
tqbit profile image
tq-bit • Edited

In case you're looking for the self hosted variant, you might be interested in fontsource.org/. It offers you to install google fonts (among others) on your local project workspace

Collapse
sumeet16 profile image
Sumeet Yadav Author

๐Ÿ‘Œ

Collapse
xavierhazzardadmin profile image
XavierHazzardAdmin

Very helpful. But I also believe it's foremost important for developers to be able to read docs because there isn't going to be a blog post for everything.

Collapse
sumeet16 profile image
Sumeet Yadav Author

Very True.

Collapse
shreyazz profile image
Shreyas Pahune

Really helpful for new web developers ๐Ÿ‘๐Ÿป

Collapse
sumeet16 profile image
Sumeet Yadav Author • Edited

I really apricate it bro!!

Collapse
lamka02sk profile image
lamka02sk

Rule #1: Download the font and serve it from your server.