Custom Fonts in Ionic3

Ionic Framework ionic-v3
1

I am using Ionic3:

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a

enter image description here

I have the following font: Ormont_Light.ttf

As you can see above, I try apply this new font in the app.scss file. However, I cannot seem to make it take effect.

As you can see, it is still using the Ionic default of:

font-family: "Roboto", "Helvetica Neue", sans-serif;

enter image description here

Question

Please can anyone advise how to implement a new font using a ttf file in Ionic 3?

1 Like
2

I add the following:

@font-face {
font-family: Ormont_Light;
src: url(../assets/fonts/Ormont_Light.ttf) format("ttf");
font-weight: 200
}
body {
    font-family: Ormont_Light !important;
}

Now I get the font showing up in the source:

body {
    font-family: Ormont_Light !important;
}

But it’s not being applied to the app on a global level as expected.

3

You want to use it as general font for your all app?

In variable.scss you could then define it as main font (in my case I use Lato):

$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";
1 Like
4

Thanks, That kind of works. It is now applying Ormont_Light too all my styles which is great. i.e. the dom now has:

body {
    font-family: Ormont_Light !important;
}

But the the displayed font is using Times New Roman font, which I guess is the browser default when it cannot find the font referenced. So I guess my path to my .ttf file is incorrect.

Where do you keep you .ttf file?

5

I’ve got my fonts under

src/assets/fonts/Lato-300
src/assets/fonts/Lato-700

etc.

Under each directory I’ve got all the font, like

Lato-300.eot
Lato-300.svg
Lato-300.ttf
Lato-300.woff
Lato-300.woff2

Then as first lines in app.component.scss I’ve got the loading of these fonts, like

@font-face {
font-family: 'Lato';
font-weight: 300;
font-style: normal;
src: url('../assets/fonts/Lato-300/Lato-300.eot');
src: url('../assets/fonts/Lato-300/Lato-300.eot?#iefix') format('embedded-opentype'),
local('Lato Light'),
local('Lato-300'),
url('../assets/fonts/Lato-300/Lato-300.woff2') format('woff2'),
url('../assets/fonts/Lato-300/Lato-300.woff') format('woff'),
url('../assets/fonts/Lato-300/Lato-300.ttf') format('truetype'),
url('../assets/fonts/Lato-300/Lato-300.svg#Lato') format('svg');
}

and finally, as said above, in variables.scss I’ve got

$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";
15 Likes
6

Thanks,

I just have a .ttf file. Do you think that’s the problem?

7

Honestly, I don’t know.

Maybe give a try, choose a google font and get it locally with following link:

 http://www.localfont.com
1 Like
8

Thanks, I will see if I can get it working.

1 Like
9

Thanks, that worked.

1 Like
10

Can you tell me what you have done? Me too use only .ttf file and working fine on the browser.But not working on the device.Can you give me a help? Thanks.

1 Like
11

Thanks … Its Working … :slight_smile:

2 Likes
12

I used the webfont generator at Fontsquirrel
You upload ttf fonts and you download webfonts

1 Like
13

Thanks, got it working! I was loading a ttf font and had to convert it to webfont!

Now it’s working correctly!

Thanks!

14

Thank you! Wanted to emphasize one gotcha for future travelers:

Ionic CLI won’t copy your font into www/assets/fonts unless it’s in a subdirectory of src/assets/fonts/:

src: url('../assets/fonts/MyFont/MyFont.ttf') format('truetype') //this works

src: url('../assets/fonts/MyFont.ttf') format('truetype') //this fails
15

Sure it will you just need to update your copy.config.ts:

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html',
          '{{SRC}}/favicon.ico',
          '{{SRC}}/apple-touch-icon.png',
          '{{SRC}}/manifest.json',
          '{{SRC}}/browserconfig.xml'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionic-angular/fonts/noto-sans**',
          '{{ROOT}}/node_modules/ionic-angular/fonts/roboto**'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
    dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  }
};

See: https://robferguson.org/blog/2018/04/17/optimising-the-performance-of-an-ionic-pwa-part-2/

1 Like
16

@robinyo Good to know, thanks for clarifying!

17

If the font displays correctly in the browser only… it means the font is installed in your computer, and therefore it is properly displayed. However, If it does not show correctly in the device, that means the font is still missing inside the App.

18

For the record, the awesome tool to download google fonts I linked above is down

But there is a new alternative: https://google-webfonts-helper.herokuapp.com

3 Likes
19

Thanks a lot!!!. it works for me