Adding fonts to an Ionic app

ionic-v1
1

Hi folks,

I’ve been working on an app for a buddy for a few hours now and it’s getting to the point where I’ve got the routing in place and the templates all marked up so now I need to start styling the UI.
The first thing I tried to do was import a font from Google’s Web Fonts library but I remembered from my time dabbling with PhoneGap a few years back that this might not be such a great idea as I had huge issues trying to get the fonts to work.

As such, I pose this question: How can I import the Raleway font (weights normal, light, ultralight and thin) into my app in the best way possible? I’ve already tried it using the standard @font-face syntax but that doesn’t seem to have worked… See below for my attempt that’s probably horrifically inadequate.

@font-face {
   font-family: "raleway";
   src: url("fonts/Raleway-Regular.ttf") format("opentype");
   font-weight: 400;
   font-style: normal;
}
@font-face {
   font-family: "raleway";
   src: url("fonts/Raleway-Light.ttf") format("opentype");
   font-weight: 300;
   font-style: normal;
}
@font-face {
   font-family: "raleway";
   src: url("fonts/Raleway-Thin.ttf") format("opentype");
   font-weight: 200;
   font-style: normal;
}
@font-face {
   font-family: "raleway";
   src: url("fonts/Raleway-ExtraLight.ttf");
   font-weight: 100;
   font-style: normal;
}

Thanks in advance - hopefully it’s just a simple fix!