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 versio…

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 {…

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 n…

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

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 referen…

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

[image] reedrichards: Lato-300 Thanks, I will see if I can get it working.

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.

Thanks … Its Working … :slight_smile:

[image] reedrichards: $font-family-md-base: “Lato”; $font-family-ios-base: “Lato”; I used the webfont generator at Fontsquirrel You upload ttf fonts and you download webfonts

Custom Fonts in Ionic3

Ionic Framework ionic-v3

sebafra December 7, 2017, 2:40pm 12

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

1 Like

Topic		Replies	Views
Custom Font - Ionic 3 don't work [SOLVED] ionic-v3	2	753	July 19, 2021
Custom font in ionic not working in device ionic-v3	3	7024	July 19, 2021
Add font to ionic Appflow	3	3167	July 19, 2021
Google Roboto regular and Roboto medium fonts import in ionic3 ionic-v3	3	5552	March 4, 2019
Fonts in ionic 0.9.24	15	12206	September 1, 2015

Custom Fonts in Ionic3

Related topics