Font Family not applied on mobile

July 19, 2022

I hav defined the font-family in the body tag in css. When inspected, the mobile view seems to work but when hosted and opened in a mobile it’s not workin

CSS Code:

body{
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif !important;
}

Inspect Mobile View

Real Mobile

>Solution :

Font Family must exist on device to be used. Your PC has that font, while Mobile does not.

You can always add fonts sources from Google Fonts, fontsquirrel or embedded from own source:

@font-face {
  font-family: 'FooBar';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/FooBar.woff2) format('woff2');
}

Georgia is not free font, that’s why it’s not on any open-source fonts platform.