Add a custom font to the Cordova project

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

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

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

Hello there< /pre> 

I have a custom font and I want to use it in my application.

The font name is myfont and the extension is (myfont .eot, .myfont.svg, myfont.ttf, myfont.woff, myfont.woff2), when I execute cordova build, they are copied to the IOS and android resource folders. However, when I open the app on the device , I cannot see the new font display.

When I run the application from the safari browser on the mac, I do see the new favorite display.

This is me Fragment of the CSS file

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

For viewing on Android and iOS devices What else do I need to do with this new font

Thank you

Use @font-face in CSS.

p>

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

Add the code to the css file at the top.
Then, you can easily use font- wherever you need it. family my-font.

Example:

CSS

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

HTML

Hello there