add custom font to a cordova project

Question

I have a custom fonts that I would like to use in my app.

The font name is myfont and the files with the extension are (myfont.eot,.myfont.svg,myfont.ttf,myfont.woff,myfont.woff2) and they are copied to IOS and android asset folder when I do a cordova build. However, when I open the app on the device I don't see the new font display.

I do see the new fond display when I run the app from safari browser on the mac.

here is the snippet from my CSS file

html, body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: 'myfont';
    font-size: 16px;
}

Is there something else I need to do in order to see this new font on the android and iOS device

Thanks

Answer 1

Use @font-face in your CSS.

@font-face {
  font-family: "my-font";
  src: url("../assets/myfonts.ttf");  // Give relative path to your css file.
}

Add code to your css file at top. And then you can easily use font-family my-font where ever you need.

Example:

CSS

.class-myfont { 
    font-family: my-font;
}

HTML

<span class="class-myfont">Hello there</span>