手机浏览器不支持字体

Question

I followed this guide to use the @font-face property for browser support, the method I used was "Slightly Deeper Browser Support". It is working on my machine (of course), I hosted the site and asked one of my friends to check the site to verify if the font is supported in his browser, and it is. However, when I checked the site from my iPhone using Safari one of the font is not supported and I wonder why that is. As mentioned in the guide I put the font face at the top, before any styles.

Here's the link to the hosted site https://gilbert1391.github.io/new-portfolio/

The fonts I want to support are The Bold Font (which is being used in the hero section) and Helvetica Neue, and the one that is not supported in my iphone's browser is the former one.

iPhone software version: 13.3.1

Answer 1

I solved the issue

First, I had the font installed in my local machine and I thought the @font-face was working properly, I uninstalled the font from my computer and worked from there.

Second, I had path wrong, fixed that by using the following path: /src/assets/fonts/TheBoldFont.ttf

But it still didn't work and I was getting this warning

Failed to decode downloaded font

What I did to fix it was to replace the previous path for this one: ./assets/fonts/TheBoldFont.ttf