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
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;
Question
Please can anyone advise how to implement a new font using a ttf
file in Ionic 3?
1 Like
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.
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
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?
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
Thanks,
I just have a .ttf
file. Do you think that’s the problem?
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
reedrichards:
Lato-300
Thanks, I will see if I can get it working.
1 Like
sampath
September 2, 2017, 9:05am
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
Thanks … Its Working …
2 Likes
sebafra
December 7, 2017, 2:40pm
12
I used the webfont generator at Fontsquirrel
You upload ttf fonts and you download webfonts
1 Like
Thanks, got it working! I was loading a ttf font and had to convert it to webfont!
Now it’s working correctly!
Thanks!
zhark
May 23, 2018, 10:23pm
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
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
zhark
May 29, 2018, 7:52pm
16
@robinyo Good to know, thanks for clarifying!
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.
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
Thanks a lot!!!. it works for me