@slumrig wrote:
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.2) ionic.app.scss
`@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";`3) in ionic.app.css
`@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.
Posts: 1
Participants: 1