Fonts from my website don't show up on iOS

Question

My Website that I'm hosting on Github Pages with a namecheap domain, doesn't allow iOS users (haven't tried android) to see the fonts. I've tried this on iOS 14.3 on an iPhone 7 with both Safari, and Chrome

The font displayed on my Windows 10 Computer is Calibri but on iOS it shows up as Times New Roman (default)

my website is http://joswinjohn.me ,

html file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/index.html

css file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/css/style.css

the repo is https://github.com/joswinjohn/joswinjohn.github.io if you need anything else

if there's anything I've left out please let me know!

Answer 1

Your Windows device is correctly displaying your "Calibri" font because that font is already installed on the device. To use a font that is not installed in the target device, you need to include the font file itself and reference it in your CSS file:

@font-face {
  font-family: Calibri;
  src: url("Calibri.ttf") format("truetype"), url("Calibri.otf") format("opentype"), url("Calibri.woff") format("woff"), url("Calibri.woff2") format("woff2");
}

In src you can use 1 or more url() s. If you use more than one, the browser will use the first match, or the first one it supports. Make sure what is inside url() matches your font file's path.