The fonts on my website displays normal on all PC browsers at the moment except on Apple mobile devices (testing with iPhone). Safari on my PC falsely renders the font-family and size in the beginning and then miraculously corrected itself without me doing nothing. But still on the iPhone, the correct font-family and size have been replaced by Time New Roman, the default one I guess, which turns my website horrendous and unprofessional looking. Please guide me what it seems to be the problem, why iPhone choose to display the basic font instead of the chosen ones?
I have found quite an easy solution for my case after posting the question here. I forgot to import @font-face into CSS that was the reason why Safari on iPhone falsely rendered the fonts. What I just did is:
- Copy the font file from your PC and paste into fonts folder path where your website files reside.
- @font-face in CSS (I assume that you all might know how to do this.)
Those are the basic steps which could cure fonts problem on iPhone but new problem has arise as of now Firefox falsely displays all those fonts instead. Well hope this helps.