How do I install new fonts in Ionic 4?

Question

Does anyone know how to update the font for Ionic 4?

I tried adding the aileron.woff to assets/fonts and putting this in the variables.scss to no avail.

  src: url('../assets/fonts/aileron.woff') format('woff');

score 88 · Answer 1 · edited May 07 '19 at 11:46

This is how I managed to add a custom font to my Ionic application

Add a directory that contains the font files to the project under the folder src\assets\fonts

src\assets\fonts\myCustomFont
 |
 +-- MyCustomFontBold.ttf
 +-- MyCustomFontBoldItalic.ttf
 +-- MyCustomFontItalic.ttf
 +-- MyCustomFontRegular.ttf

Define the fonts in the file src\theme\variables.scss:

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
}

In the same file src\theme\variables.scss, edit the :root element to define your custom font as the font of the Ionic application:
```
--ion-font-family: 'My Custom Font';
```

You can fetch the font-face definitions from the web like https://fonts.googleapis.com/css?family=Roboto+Condensed and copy the content from the url to variables.scss if you do not want to add the font files to the package — bvamos, Mar 05 '19 at 07:28

score 8 · Answer 2 · answered Apr 08 '19 at 23:35

Add a Custom Font in directory folder src\assets\fonts
Define the fonts in the file src\theme\variables.scss before :root

@font-face { font-family: "Custom Font"; src: url("../assets/fonts/Custom Font.xxx"); }

define your custom font in :root

--ion-font-family: "Custom Font";

score 7 · Answer 3 · answered Aug 19 '18 at 08:21

You seem to be interested in Ionic 4 / Angular.

I just created a test app with template "blank" in Ionic 4.0.0 beta. Here's what I put into variable.sccs to change all fonts across platforms:

:root,
:root[mode=ios],
:root[mode=md] {
  --ion-font-family: "Palatino", "Times New Roman", serif !important;

  font-family: "Palatino", "Times New Roman", serif !important;
}

On my Mac I see "Palatino".

The key is, to use "!important". As far as the Beta goes, theming of fonts is not yet documented. It may be clarified later or the behavior may change in final. Keep this in mind.

score 7 · Answer 4 · edited Feb 11 '20 at 09:42

7

Add your font in the directory assets, and add this to your variables.scss file to declare the font family and set a class that uses it:

@font-face {
  font-family: 'custom';
  src: url('../assets/fonts/custom.ttf');
}
.text-custom { 
  font-family: "custom"; 
}

Then in any xx.page.html you can use the class like this:

<span class="text-custom">your text</span>

edited Feb 11 '20 at 09:42

yivi

42,438
18
116
138

answered May 16 '19 at 18:44

deimon

99
1
6

score 1 · Answer 5 · answered Apr 23 '20 at 14:22

1

It's work for me

Make sure you give the current font folder path and file name

answered Apr 23 '20 at 14:22

Abdullah

2,393
1
16
29

score 0 · Answer 6 · answered Aug 09 '18 at 00:15

You'll want to use the CSS4 variable --ion-font-family

Here is an example:

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Test Font Family</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/@ionic/core@4.0.0-beta.2/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.2/css/ionic.min.css">
  <style>
  @font-face {
    font-family: 'Hanalei Fill';
    font-style: normal;
    font-weight: 400;
    src: local('Hanalei Fill'), local('HanaleiFill-Regular'), url(https://fonts.gstatic.com/s/hanaleifill/v6/fC1mPYtObGbfyQznIaQzPQi8UAjA.woff2) format('woff2');
  }

  :root {
    --ion-font-family: 'Hanalei Fill';
  }
  :root[mode=md] {
    --ion-font-family: 'Hanalei Fill';
  }
  :root[mode=ios] {
    --ion-font-family: 'Hanalei Fill';
  }
  </style>
</head>

<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Test</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content id="content" fullscreen>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Font Family</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Testing
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</body>
</html>

What would I paste into the variables.scss? When I try the portion within the style selectors, I get this error. Refused to load the font 'data:application/font-woff;base64, it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. — Troy Thompson II, Aug 09 '18 at 04:28

score 0 · Answer 7 · answered Jan 21 '20 at 07:50

1.Include the font ttf file inside the src/assets/fonts/ folder.

2.Now create the font family by including it in the global.scss(src/global.scss) EX:@font-face { font-family: 'CustomfontName'; src: url('./assets/fonts/CustomFont.ttf'); }

3.Apply the style

<ion-content>
  <div style='font-family:CustomfontName'>
      Sample text for custom font
  </div>
</ion-content>

For better understanding click the below link,

https://www.youtube.com/watch?v=Hz7SLdGG8HA

score 0 · Answer 8 · answered Mar 24 '22 at 12:38

in global.scss file

@font-face {
  font-family: 'quicksand';    //This is what we are going to call
  src: url('./assets/font/Quicksand-Bold_df5ccd3628ec30ca750b7a6c1f1d6dac.ttf');
}

.mobile-heading {
  font-family: "quicksand";
}

and in HTML file mobile-heading class

<h1 class="mobile-heading">quicksand Font apply</h1>

How do I install new fonts in Ionic 4?

8 Answers8

Linked