# Using Custom Fonts

## Method 1. Using custom font files from Assets

In this method, you need to download custom font files and keep them in `assets` for static storage. In the sample provided in the app, we have two different fonts downloaded in `assets`

* Muli - Full font family with various font-faces
* Qranklestein - Single font file, hence single font-face

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LaPzvKGVB3OmiUzNhM-%2F-LaQ1clxV5UPA052QcTK%2FScreen%20Shot%202019-03-20%20at%205.49.01%20PM.png?alt=media\&token=3e4ef2cd-67e3-4332-97b7-8b732dafb6be)

The font is imported in `global.scss` using

```
@font-face {
  font-family: 'Qranklestein';
  font-style: normal;
  font-weight: normal;
  src: url('./assets/fonts/Qranklestein.ttf');
}
```

To define different font-faces of same font, vary the `font-style` and `font-weight` properties of the font-face. For example, **Muli-Bold-Italic** font-face is imported as

```
@font-face {
  font-family: 'Muli';
  font-style: italic;
  font-weight: bold;
  src: url('./assets/fonts/Muli-BoldItalic.ttf');
}
```

To use the font in your app, you just need to use the mentioned `font-family` in any of the CSS styles

```
:root[mode=ios] .muli,
:root[mode=md] .muli{
  --ion-font-family:  'Muli'!important;
  font-family:  'Muli' !important;
}
```

![Different font-faces of same font](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LaPzvKGVB3OmiUzNhM-%2F-LaQ33oXP_T-brF3n_5i%2FScreen%20Shot%202019-03-20%20at%205.54.59%20PM.png?alt=media\&token=940ac24e-6de9-469d-8b2a-63c260147f92)

## Method 2. Using Google Fonts

If you want to skip the hassle of importing fonts from assets, and use the vast variety of Google Fonts, you can simply import them in your `index.html` like this

```
<link href="https://fonts.googleapis.com/css?family=Srisakdi" rel="stylesheet">
```

and then use the font simply by defining the font-family in a CSS class

```
:root[mode=ios] .srisakdi,
:root[mode=md] .srisakdi{
  --ion-font-family:  'Srisakdi'!important;
  font-family:  'Srisakdi' !important;
}
```

![Font imported from Google Fonts](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LaPzvKGVB3OmiUzNhM-%2F-LaQ38WCfl1UvG0MumJU%2FScreen%20Shot%202019-03-20%20at%205.55.08%20PM.png?alt=media\&token=5db4e63c-9b07-4d18-a316-5052e78230ee)

To find a Google font, visit [Google Fonts ](https://fonts.google.com/). You will see a huge variety of fonts

![Wide variety of fonts on Google Fonts](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-Lak5SF1CRTd1oO568QH%2F-Lak5xEVDCqTE66LH-vU%2FScreen%20Shot%202019-03-24%20at%207.59.10%20PM.png?alt=media\&token=d342d65e-8780-401c-8765-3fb0b4e762bb)

Whichever Font you like, click the `+` sign next to it. Your font gets selected. Click the hovering div at the bottom saying `1 family selected` , you will see the details of the selected font

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-Lak5SF1CRTd1oO568QH%2F-Lak6MPsvak8pSnNFt3t%2FScreen%20Shot%202019-03-24%20at%208.00.50%20PM.png?alt=media\&token=8c058d66-03d4-4f7e-9c98-0f2a945c7bf6)

Use the `<link>` and CSS code snippet to import the font into your app as explained earlier in this section. If you have variety of font styles (Bold, italic etc ) make sure to include that in the CSS declarations as explained in Method 1 above.