Best way to bundle Roboto with an Ionic application?

Ionic Framework
1

The default fonts in Ionic’s styles (–ion-default-font) are Roboto and Helvetica Neue. This makes sense because Roboto comes pre-installed on Android, and Helvetica Neue comes pre-installed on Apple operating systems such as iOS. This makes sense because it’s a mobile app development framework.

Windows doesn’t have Roboto or Helvetica Neue installed by default, but the Ionic application looks quite different if it is installed. Rather than adding an additional fallback font, I’d like Roboto to display for users on Windows. I know I can get Roboto from places like Google Fonts (and it’s open-source), but what’s the best way to embed it with Ionic so that anyone using the application will have it, no matter the platform? There’s more than one way to do it, but what would you recommend as far as an Ionic 4 application goes?

2

did you work out how to do this?

3

For what it’s worth, this is what I did in my own application:

In app.component.ts:

  1. Add public loadWebfont = false
  2. Upon initialization, do:
this.platform.ready().then(readySource => {
  if (readySource === 'dom') {
    // Running from the browser, so load Roboto from Google Webfonts.
    this.loadWebfont = true;
  }
  // ...
}

In app.component.html, at the bottom, add:

<style *ngIf="loadWebfont">
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap');
</style>

I’m sure it can be adapted to any other use-cases. The point for me was mainly to have a more realistic experience while developing on Windows.