From writer ✍️

Hello everyone👋
So this is my very first blog post on Hashnode and I am really excited about it. A few days ago, I was working on a react assignment where I was given font files to use. When it comes to using font-family in css, Google fonts is the go-to place for us developers. It was my first time seeing those font file extensions😅(.otf, .ttf).

I asked Google about it, as everyone does, to see if it could help me out.

As always, IT DID.

But there was not much information. Though there was, but not much. So I thought, why not give Google something more on the topic to display. Therefore, here comes this blog.

A complete guide on how to add external font-files into your project.
Hope you enjoy it.

File Structure

To work with external font files following are the files and folders you need to create

1. fonts folder :- This folder will include all your font files (.ttf, .otf)
2. font.css file :- This file will use font-face to add name and url to font files so that you can use it in your project.

After this you only need to import the font.css to your main css file and that's it. Use these fonts like any normal ones.

Into font.css file

@font-face {
  font-family: "ProductSans";
  src: url("./fonts/Product_Sans.ttf");
}
@font-face {
  font-family: "GoboldRegular";
  src: url("./fonts/Gobold_Regular.otf");
}
@font-face {
  font-family: "MontserratAlternatesRegular";
  src: url("./fonts/MontserratAlternates-Regular.otf");
}
@font-face {
  font-family: "OpenSansRegular";
  src: url("./fonts/OpenSans-Regular.ttf");
}

Here font-face has 2 key-value pairs - font-family and src.

• font-family value is the name you give to that font, which you will mention when you want to use it. The name is completely your choice.

• src value is the path to the font file.

Note :- If you are trying to use external font files in codesandbox, you need to shift the fonts folder to public instead of src. If you are working on the project locally, then it should work fine by having fonts folder in the src. Figuring this itself took me such hell of time. I had been searching why the fonts were not being applied and it worked once I shifted it to public.

styles.css file overview

This is the main css file or the head css file of my react project. Yours can completely differ and that's completely ok. You just need to include your font.css file in your head css file to use the external fonts.

@import url("./font.css");

.goboldRegular {
  font-family: "GoboldRegular";
}
.montserratAlternatesRegular {
  font-family: "MontserratAlternatesRegular";
}
.openSansRegular {
  font-family: "OpenSansRegular";
}
.productSans {
  font-family: "ProductSans";
}

It's that easy to use.

Summarizing steps

Step 1 : Create a folder named fonts in src(if working locally) or public(if codesandbox). Include all the font files in this folder.

Step 2 : Create a file named font.css. Add font-face for all the font files you want to use here. The syntax can be found in the code snippet some distance above in this blog.

Step 3 : Now import the font.css file into your project's main css file.

Step 4 : Done. Now use the fonts in your project with the names you gave while declaring font-faces. Enjoy!

Done and Dusted ✨

That's it for this blog. It might seem an easy task to those who know about it, about font-face; but it completely isn't for those who have been using google fonts till now and haven't had the slightest idea if using external font file is even a thing. I myself best fitted the second category a few weeks ago.

I created a small codesandbox project using external font files for your reference. You can see and check it below 👇

.
.
.
.
.

Hope this blog helped. Please shower some love❤️. Let's make this reach to a lot of developers. Au revoir 🤝