Font on mobile device

Questions
1

Hi

I’m working with Cordova & F7 (PWA) I don’t see the same font on mobile device, on the computer browser looks fine, like this …

tablerook
tablerook822×466 49.8 KB

But any mobile device looks …

WhatsApp Image 2020-09-30 at 19.44.52
WhatsApp Image 2020-09-30 at 19.44.521110×540 37 KB

DS-POINT it’s the font name doesn’t work on mobile

:root {

    --f7-navbar-bg-color: orange ;

    --f7-panel-bg-color: RGB(33,33,33);

    --f7-font-family: 'DS-POINT', 'Roboto', system-ui, Noto, Helvetica, Arial, sans-serif;

    --f7-preloader-modal-bg-color: rgba(243, 162, 11, 0.8);

  }

.root.ios{

    --f7-navbar-bg-color: orange ;

    --f7-font-family: 'DS-POINT', 'Roboto', system-ui, Noto, Helvetica, Arial, sans-serif;

}

Obviously, on fonts carpet exist the file DS-POINT.ttf

Any suggestions?

3

I guess this font is in your desktop system. And of course it is not present in mobile devices. You need to use web fonts feature to include custom fonts https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

4

Thank you Vladimir.

It’s the only way? What happens if the mobile device has not internet connection?

5

Include the fonts files (woff, …) In the fonts folder and add the fonts path related to fonts folder.

1 Like
6

Here the solution…

On index.css file put on top …

@font-face {

    font-family: "font-tablero";

    src: url("../fonts/DS-POINT.TTF");  // Give relative path to your css file.

}

Thanks.