发表新帖
发表新帖

How do I install new fonts in Ionic 4?

后端 未结
关注
7 1237
长情又很酷
长情又很酷 2021-02-01 04:50

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.
相关标签:
7条回答
  • 遥遥无期
    2021-02-01 05:11

    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>
    0 讨论(0)
  • 灰色年华
    2021-02-01 05:14

    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

    0 讨论(0)
  • 不知归路
    2021-02-01 05: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>

    0 讨论(0)
  • 星月不相逢
    2021-02-01 05:16

    It's work for me

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

    0 讨论(0)
  • 粉色の甜心
    2021-02-01 05:24

    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';
    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-02-01 05:24

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题