CODEWITHSUNDEEP
ionic-frameworkionic4
Troy Thompson II
Troy Thompson II

Reputation: 431

How do I install new fonts in Ionic 4?

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');

Upvotes: 30

Views: 32596

Answers (9)

Luis Gerardo López Salazar
Luis Gerardo López Salazar

Reputation: 299

look for the font that you like the most in: https://fonts.google.com/

  • Download the file .woff2 Example: lato_font.woff2

  • Create a new folder in the assets directory assets/fonts

  • In the folder /fonts add the file lato_font.woff2

Then look in the themes folder for a .scss file: theme/Variables.scss

Add before line root: { }

Example:

@font-face {
  font-family: 'Lato', sans-serif;
  src: url('../assets/fonts/lato_font.woff2') format('woff2');
}

.......

root:{
---  --- 
}

Add inside the root: {}

root: { 

--ion-font-family: "'Lato', sans-serif;"; }

Upvotes: 0

Sushil
Sushil

Reputation: 830

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>

Upvotes: 0

Abdullah
Abdullah

Reputation: 2933

It's Work for me

It's work for me

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

Upvotes: 1

deimon
deimon

Reputation: 109

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>

Upvotes: 8

Mailaivasan
Mailaivasan

Reputation: 11

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

Upvotes: 0

Strider
Strider

Reputation: 3739

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

  1. 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

  2. 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');
}

  3. 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';

Upvotes: 91

mohammad MRAD
mohammad MRAD

Reputation: 81

  1. Add a Custom Font in directory folder src\assets\fonts
  2. 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"); }

  1. define your custom font in :root

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

Upvotes: 8

Andreas Manessinger
Andreas Manessinger

Reputation: 71

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.

Upvotes: 7

Adam LaCombe
Adam LaCombe

Reputation: 159

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/[email protected]/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/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>

Upvotes: 0

Related Questions