Custom Font - Bariol not working in iOS

I was provided with a Bariol font in a bundle and have added to my project using the manual approach.

  1. file structure all the font .eot, .svg, .tff. woff, .woff2 font files are put here - www/lib/ionic/fonts/bariol/
    From stack overflow I’ve read that every font file need to be in the fonts directory but that doesn’t seem to be true. Moving the files from one to the other directory has made no difference.

    `@import “www/css/bariol-font”;

$font-family-sans-serif: “Bariol”, “Helvetica Neue”, “Roboto”, sans-serif !default;
$font-family-light-sans-serif: “Bariol”, “HelveticaNeue-Light”, “Roboto-Light”, sans-serif-light !default;

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: “…/lib/ionic/fonts” !default;

@import “www/css/style”;

// Include all of Ionic
@import “www/lib/ionic/scss/ionic”;`

  1. in

`@font-face {
font-family: ‘bariol_regularregular’;
src: url("…/lib/ionic/fonts/bariol/bariol_regular-webfont.eot");
src: url("…/lib/ionic/fonts/bariol/bariol_regular-webfont.eot?#iefix") format(“embedded-opentype”), url("…/lib/ionic/fonts/bariol/bariol_regular-webfont.woff2") format(“woff2”), url("…/lib/ionic/fonts/bariol/bariol_regular-webfont.woff") format(“woff”), url("…/lib/ionic/fonts/bariol/bariol_regular-webfont.ttf") format(“truetype”), url("…/lib/ionic/fonts/bariol/bariol_regular-webfont.svg#bariol_regularregular") format(“svg”);
font-weight: normal;
font-style: normal; }

@font-face {
font-family: ‘bariol_boldbold_italic’;
src: url("…/lib/ionic/fonts/bariol/bariol_bold_italic-webfont.eot");
src: url("…/lib/ionic/fonts/bariol/bariol_bold_italic-webfont.eot?#iefix") format(“embedded-opentype”), url("…/lib/ionic/fonts/bariol/bariol_bold_italic-webfont.woff2") format(“woff2”), url("…/lib/ionic/fonts/bariol/bariol_bold_italic-webfont.woff") format(“woff”), url("…/lib/ionic/fonts/bariol/bariol_bold_italic-webfont.ttf") format(“truetype”), url("…/lib/ionic/fonts/bariol/bariol_bold_italic-webfont.svg#bariol_boldbold_italic") format(“svg”);
font-weight: normal;
font-style: normal; }

@font-face {
font-family: ‘bariolregular_italic’;
src: url("…/lib/ionic/fonts/bariol/bariol_regular_italic-webfont.eot");
src: url("…/lib/ionic/fonts/bariol/bariol_regular_italic-webfont.eot?#iefix") format(“embedded-opentype”), url("…/lib/ionic/fonts/bariol/bariol_regular_italic-webfont.woff2") format(“woff2”), url("…/lib/ionic/fonts/bariol/bariol_regular_italic-webfont.woff") format(“woff”), url("…/lib/ionic/fonts/bariol/bariol_regular_italic-webfont.ttf") format(“truetype”), url("…/lib/ionic/fonts/bariol/bariol_regular_italic-webfont.svg#bariolregular_italic") format(“svg”);
font-weight: normal;
font-style: normal; }

@font-face {
font-family: ‘bariol_boldbold’;
src: url("…/lib/ionic/fonts/bariol/bariol_bold-webfont.eot");
src: url("…/lib/ionic/fonts/bariol/bariol_bold-webfont.eot?#iefix") format(“embedded-opentype”), url("…/lib/ionic/fonts/bariol/bariol_bold-webfont.woff2") format(“woff2”), url("…/lib/ionic/fonts/bariol/bariol_bold-webfont.woff") format(“woff”), url("…/lib/ionic/fonts/bariol/bariol_bold-webfont.ttf") format(“truetype”), url("…/lib/ionic/fonts/bariol/bariol_bold-webfont.svg#bariol_boldbold") format(“svg”);
font-weight: normal;
font-style: normal; }`

All of this works fine in the browser with ionic serve but fails to register when emulating iOS. Its been difficult to find clear documentation on how to do this. There seems to be two main ways of doing it. One of them being the manual way as laid above and another seems to use the cli tools. Since I’m using a custom font handed to me in a bundle I don’t think I could achieve it with the cli method. I also wonder if there are possibly specific reasons why iOS may not register custom fonts if they are not available natively? If I change font family to Times New Roman or something common the iOS emulation works fine.

I have also changed the src url font-face directives to use relative path as well as from root path and that too doesn’t make a difference.

Any help? I don’t want to kill any more time with trial and erroring something that should be pretty basic.

1 Like

I will answer my own question in case this may be of use to others.

I followed this tutorial here which lays out in steps what you need to do to add custom fonts to an ios project. It involves getting into Xcode and adding the fonts to the *-info.plist file as well as copying the fonts into the XCode project Resources directory (not to be confused with the same ‘resources’ (small ‘r’) in your ionic project home directory. There is a step where you need to add the fonts to they Copy Bundle resources setting in “Build Phases” but Xcode was nice and did this automatically when I copied the fonts into Resources.

There may be other ways to do this but this is the only thing I tried that worked. The tutorial was the only one I could find that laid it out in steps I could follow and succeed with.

1 Like