CODEWITHSUNDEEP
javascriptcssangularjsionic-framework
MehdiN
MehdiN

Reputation: 351

Custom font not loading in ionic

I just can't get custom fonts to work on my ionic project.

Console:

downloadable font: download failed (font-family: "Open Sans" style:normal weight:200 stretch:normal src index:1): status=2147500037 source: file:///Users/MehdiNathani/Desktop/Fitness/Fitness/www/lib/ionic/fonts/opensans-regular-webfont.woff style.css:408:12
------------------------------------------------------------------------

downloadable font: download failed (font-family: "Open Sans" style:normal weight:200 stretch:normal src index:2): status=2147500037 source: file:///Users/MehdiNathani/Desktop/Fitness/Fitness/www/lib/ionic/fonts/opensans-regular-webfont.ttf style.css:408:12
------------------------------------------------------------------------

CSS File:

@font-face {
  font-family: 'Open Sans';
  src: url('../lib/ionic/fonts/opensans-regular-webfont.eot');
  src: url('../lib/ionic/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../lib/ionic/fonts/opensans-regular-webfont.woff') format('woff'),
  url('../lib/ionic/fonts/opensans-regular-webfont.ttf') format('truetype'),
  url('../lib/ionic/fonts/opensans-regular-webfont.svg') format('svg');
  font-weight: 200;
}

What am I doing wrong?

Upvotes: 0

Views: 2052

Answers (2)

Ishara Amarasekera
Ishara Amarasekera

Reputation: 1439

Make sure your path to fonts folder is correct.

I have my fonts folder inside www folder and this is my code.

styles.css

@font-face {
 font-family: 'Indie Flower';
 src: url('../fonts/IndieFlower.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

display.html 

<h3 style="font-family: 'Indie Flower'">This is Indie Flower</h3>

This worked perfectly fine when I built it on an android device.

Upvotes: 1

Jur Clerkx
Jur Clerkx

Reputation: 698

I'm not sure that the lib folder is compiled the same way as the other files are. I've added my own custom font and left it in the css folder. You could try to just create the folder fonts in the folder css. This way you can use:

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/opensans-regular-webfont.eot');
  src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('opensans-regular-webfont.woff') format('woff'),
  url('opensans-regular-webfont.ttf') format('truetype'),
  url('opensans-regular-webfont.svg') format('svg');
  font-weight: 200;
}

This is my own code I used in my app (which is working):

@font-face {
    font-family: Rochoes;
    src: url('Rochoes.ttf');
}

@font-face {
    font-family: Vollkorn-Bold;
    src: url('Vollkorn-Bold.ttf');
}

@font-face {
    font-family: Vollkorn-Regular;
    src: url('Vollkorn-Regular.ttf');
}

Upvotes: 0

Related Questions