# 3 quick ways to add fonts to your React app
In HTML, `font` is used to specify the font face, size, and typography. You can add fonts to your React application in different ways. This article explains three quick ways of adding fonts to your React app.
> All the examples in the article assumes the React code structure provided by the [create-react-app](https://create-react-app.dev/). You can choose to use the examples in any other code structure too.
# ✨ Using the Font link
We can link to any fonts hosted online using the `` tag inside an HTML file. Let's take an example of applying `Google Fonts` using the `` tag.
* Go to \[https://fonts.google.com/\](go to https://fonts.google.com/).
* Click on a Font of your choice,
> ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610093815826/jvmbLIxJv.png?border=1,CCCCCC&auto=compress align="left")
* Click on the `+Select this style` button
> ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610094002931/zLVRpQUZQ.png?border=1,CCCCCC&auto=compress align="left")
* Go to the section, `Use on the web` and copy the code under the `` section
> ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610094238924/BodHigyQO.png?border=1,CCCCCC&auto=compress align="left")
* Go to the `index.html` file of your project. If your app is based on the `create-react-app`, you will find it under the `public` folder. Paste the copied lines inside the `` section. Here is an example,
```html
```
* Go to your CSS file and add a style like,
```css
.font-link {
font-family: 'Hanalei Fill', cursive;
}
```
Here we are using the same font-family that linked in the above step.
* Last, you can add this style anywhere in your React component.
```js
const FontLink = () => {
return(
This is with Font Link. We are linking the fonts from the Google Fonts.
)
};
export default FontLink;
```
Please note, we are using the class name with the `` element in the React component.
This is how the component may look like,
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610100186397/ipOeEMaGI.png?border=1,CCCCCC&auto=compress align="left")
# ✨ Using the Web Font Loader
The [Web Font Loader](https://github.com/typekit/webfontloader) helps you to load fonts from [Google Fonts](http://www.google.com/fonts/), [Typekit](http://www.typekit.com/), [Fonts.com](http://www.fonts.com/), and [Fontdeck](http://fontdeck.com/), as well as self-hosted web fonts. It is co-developed by Google and Typekit.
Let us see how to load multiple fonts from Google Fonts and use them in a React component.
* Install `webfontloader`
```shell
yarn add webfontloader # Or, npm i webfontloader
```
* Import `webloader` to your component
```js
import WebFont from 'webfontloader';
```
* Load the desired fonts using the font name. It is better to use the `useEffect` hook and let it run once when the component loads. As the fonts need to be loaded just once in the app, you can load them in the `index.js` file.
```js
useEffect(() => {
WebFont.load({
google: {
families: ['Droid Sans', 'Chilanka']
}
});
}, []);
```
Here we are loading fonts, 'Droid Sans' and 'Chilanka'.
* Now you can use these fonts in a React component using the `className` or `style` attribute. To use with the `className` attribute, create a CSS class in the .css file,
```css
.font-loader {
font-family: 'Chilanka';
}
```
Then, in the component's `render()` method,
```html
This is with Web Font Loader using the class attribute.
We are loading the Chilanka font from the Google Fonts.
```
With the `style` attribute,
```html
This is with Web Font Loader using the style attribute.
We are loading the Droid Sans fonts from the Google Fonts.
```
This is how the component may look like,
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610100263810/n2wh4dP3m.png?border=1,CCCCCC&auto=compress align="left")
Read more about the `Web Font Loader` [from here](https://github.com/typekit/webfontloader).
# ✨ Using `@font-face`
In some situations, you may not be allowed to connect to a font repository online and link/load it. A classic example is, your app users use `intranet` and they have restricted access to the internet. The fonts must be downloaded locally and packaged within the app in these situations.
`@font-face` is a CSS rule to define a font name by pointing to a font with a URL.
* Create a folder called `fonts` under `src`.
* Download the required fonts into the `src\fonts` folder. In this example, we have downloaded two fonts, `Goldman` and `Lobster`.
> ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610098339208/2v7UqM-Yb.png?border=1,CCCCCC&auto=compress align="left")
* Next, import the fonts into the `index.js` file.
```js
import './fonts/Goldman/Goldman-Bold.ttf';
```
* In the `index.css` file add,
```css
@font-face {
font-family: "GoldmanBold";
src: local("GoldmanBold"),
url("./fonts/Goldman/Goldman-Bold.ttf") format("truetype");
font-weight: bold;
}
```
* Now add a class name in the `App.css` file that uses this family name.
```css
.font-face-gm {
font-family: "GoldmanBold";
}
```
* Use this class name in your React component,
```js
const FontFace = () => {
return(
This is using Font Face.
We are linking the Goldman font from the Google Fonts.
)
}
export default FontFace;
```
This is how the component may look like,
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610100305057/t-3MHunUd.png?border=1,CCCCCC&auto=compress align="left")
# Before we end...
Here is something for you:
> ### Learn React, Practically
>
> > I've been developing professional apps using ReactJS for many years now. My learning says you need to understand ReactJS fundamentally, under the hood to use it practically.
> >
> > With that vision, I have created a ReactJS PlayLIst that is available for the developer community for FREE. Take a look:
> >
> > %[https://www.youtube.com/watch?v=ODKIxaSMgpU&list=PLIJrr73KDmRyrDnDFy-hHvQ24rRjz6e_J]
I hope it was useful. Please Like/Share so that it reaches others as well. But, a few more points before we finish,
* All the mechanisms discussed here are also applicable to a vanilla JavaScript application.
* We can use multiple fonts in one app.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610102041610/3NTXjef61.png?border=1,CCCCCC&auto=compress align="left")
* All the source code used in this article is in my GitHub repository.
%[https://github.com/atapas/font-loader]
Let's connect. You can @ me on [Twitter (@tapasadhikary)](https://twitter.com/tapasadhikary) with comments, or feel free to follow. You may also enjoy reading,
* [How to create React form with a single change event handler?](https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler-ckizqh0yq00x7zks16wd1cxu1)
* [10 useful HTML file upload tips for web developers](https://blog.greenroots.info/10-useful-html-file-upload-tips-for-web-developers-ckgetegpf0c7go9s123wvg7bi)