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

回答1:

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

回答2:

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.

回答3:

Add you font in the directory "assets"

In the file "variables.cscc" write

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

And in your xx.page.html write

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

Regards

回答4:

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";

回答5:

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>

来源：https://stackoverflow.com/questions/51755047/how-do-i-install-new-fonts-in-ionic-4

标签

ionic-framework

ionic4