Android – comic sans font not showing on mobile

androidcssfontsmobile

I recently built a comics website at www.pipanni.com that uses the "Comic Sans" font. Everything is ok so far, except that the font is not showing on my Samsung Galaxy mobile phone. It shows something that looks like Arial.

I've already tried every clear history / cache, etc.

Here's my styles font:
body
{
font-family: "comic sans ms", "comic sans", "Comic Sans", arial, helvetica, tahoma, verdana;
font-size: 18px;
color: #000000;
}

The home page's title is working ok on my laptop (and every other computer I've tested the website on), but not on my smartphone.

I don't have an iphone, but I think it is working ok on those.

What can I try next?

P.S: This is a comics website, it's supposed to use "Comic Sans"! 🙂

Best Answer

I just found the simple solution for this, you just need to override the font file using font face like so:

@font-face {
  font-family: 'Comic Sans MS';
  src: url("comic-sans-ms/comici.ttf");
}

and HTML code 

<h1 style="font-family: 'Comic Sans MS';">Comic sans</h1>

What happen is browser will override the default font file by using your file. In any devices, the browser will download comici.ttf and render the same font.

p/s: font file you can download from here https://www.wfonts.com/font/comic-sans-ms

Related Topic