search

gianlazz / IonicFrameworkCloudOcrRsvp

Ionic Framework Optical Character Recognition + Rapid Serial Visual Presentation
1 stars 0 forks source link

Custom fonts not displaying on device build #8

Closed gianlazz closed 7 years ago

gianlazz commented 7 years ago

I think it most likely has to do with the ttc font format. It looks like android only supports ttf. Since it loads just fine in my macs browser with ionic serve

https://stackoverflow.com/questions/24539861/android-how-to-use-custom-font-file-containing-multiple-fonts

gianlazz commented 7 years ago

Here's a Futura Medium TTF Font http://ttfonts.net/download/17298.htm

gianlazz commented 7 years ago

Nope, turns out it needed to be a woff font format to work properly on my android device. I converted that TTF font above into woff with this site: https://everythingfonts.com/ttf-to-woff

The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009 and is now a World Wide Web Consortium (W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata.

I did see someone reporting that changing to woff format did the trick to get the correct font displaying on their device so that's why I gave it a try.

In app.scss

@font-face {
font-family: Futura_Medium;
src: url(../assets/fonts/Futura_Medium.woff) format("woff");
}
body {
font-family: Futura_Medium;
}

Then in the pages .scss file's class I add a font-family attribute like this:

  .rsvp {
      text-align: center;
      color: #4A90E2;
      font-family: Futura_Medium;
  }
gianlazz commented 7 years ago

Here's the commit where this was resolved: 34553b4288644e1e147d71b88e8460d413778d18