Custom Fonts In Ionic

ionic-v1
1

I read some posts online and on this forum too about using custom fonts …tried so many ways but no luck so far.

Is there any one who implemented this with the latest version of IONIC?

Am simply posting my code, in case it’s helpful to debug

@font-face {
    font-family: 'Bariol';
    src: url('..lib/ionic/fonts/Bariol.eot');
    src: url('..lib/ionic/fonts/Bariol.eot') format('embedded-opentype'),
         url('..lib/ionic/fonts/Bariol.woff2') format('woff2'),
         url('..lib/ionic/fonts/Bariol.woff') format('woff'),
         url('..lib/ionic/fonts/Bariol.ttf') format('truetype'),
         url('..lib/ionic/fonts/Bariol.svg#Bariol') format('svg');
}

* {
    font-family: 'Bariol', 'open sans', verdana, helvetica, georgia, sans-serif;
}
2

Looks like you’re missing a slash between the “…” and the “lib/ionic/…”. Try:

@font-face {
    font-family: 'Bariol';
    src: url('../lib/ionic/fonts/Bariol.eot');
    src: url('../lib/ionic/fonts/Bariol.eot') format('embedded-opentype'),
         url('../lib/ionic/fonts/Bariol.woff2') format('woff2'),
         url('../lib/ionic/fonts/Bariol.woff') format('woff'),
         url('../lib/ionic/fonts/Bariol.ttf') format('truetype'),
         url('../lib/ionic/fonts/Bariol.svg#Bariol') format('svg');
}
3 
@font-face {
    font-family: 'Bariol';
    src: url('/lib/ionic/fonts/Bariol.eot');
    src: url('/lib/ionic/fonts/Bariol.eot') format('embedded-opentype'),
         url('/lib/ionic/fonts/Bariol.woff2') format('woff2'),
         url('/lib/ionic/fonts/Bariol.woff') format('woff'),
         url('/lib/ionic/fonts/Bariol.ttf') format('truetype'),
         url('/lib/ionic/fonts/Bariol.svg#Bariol') format('svg');
}

Still not working …works in browser but not on device

4

Don’t use absolute paths. Use relative paths. Ex:

url('../lib/ionic/fonts/Bariol.eot')

Path is relative from where you place your CSS file.

5

Still Not working …

Have you guys tried it and is it working on your app? (…with latest IONIC installed)

6

Yes, I use custom fonts in my apps, and they work just in browser, iOS, and Android with the latest stable Ionic (1.3.0; 1.3.1 is having problems with tabs for me at the moment).

With fonts in CSS, the trick is to make sure that the path is relative from where your CSS file is located. I’m assuming your CSS file is in the “www/css” folder, and your fonts are in the “www/lib/ionic/fonts” folder, and you have four versions of those fonts in the fonts folder (eot, woff, ttf, and svg)? If so, then the following should work for you:

@font-face {
    font-family: 'Bariol';
    src: url('../lib/ionic/fonts/Bariol.eot');
    src: url('../lib/ionic/fonts/Bariol.eot#iefix') format('embedded-opentype'),
         url('../lib/ionic/fonts/Bariol.woff') format('woff'),
         url('../lib/ionic/fonts/Bariol.ttf') format('truetype'),
         url('../lib/ionic/fonts/Bariol.svg#Bariol') format('svg');
}

I think you can safely drop the “woff2” line from your previous examples, or at least I haven’t needed that option in the font definitions in my apps. Just make sure that (a) the paths to your font files are relative from where your CSS file is located, and (b) that all of the fonts you refer to are actually located in the folder you’re listing in CSS (and case is important, so your files can’t be called “bariol.ttf” if you list them as “Bariol.ttf” in the CSS).

Good luck.

7

Both a and b points are intact. I’ve cross checked it. Still it’s not working :frowning:

8

1. add variables to app.variables.scss, example:

$quando-font-path: $font-path !default;

/* latin-ext */
@font-face {
font-family: ‘Quando’;
font-style: normal;
font-weight: 400;
src: local(‘Quando-Regular’), url("#{$quando-font-path}/quando.ttf") format(‘truetype’), url("#{$quando-font-path}/quando.woff") format(‘woff’), url("#{$quando-font-path}/quando.woff2") format(‘woff2’);
}

$font-family-md-base: “Quando”, sans-serif;

**2. copy your font files (*.ttf, .woff) to the folder: your_project_folder\node_modules\ionic-angular\fonts*

Works on device (android 4.0.4)
Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 7 SP1
Node Version: v4.4.5

9

Hey technotip,
i would download a fresh copy of the font and use their css code. i guess that the font-family doesn’t match the real name:

@font-face { font-family: 'bariol_regularregular'; src: url('../lib/ionic/fonts/bariol_regular-webfont.eot'); }