Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS font not working on mobile version



Site URL: https://www.meganpay.com/


I have added a custom font to my website through custom CSS. It has made the changes on the desktop version but doesn't mobile (I tried on both IOS/Android). Any suggestions?

Below is a screenshot of code I've inputted. Please let me know if I have done it incorrectly.


Screenshot 2021-07-18 at 18.56.40.png

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

  • 0


Several issues with your font importing may be causing this problem.

1) You need to make sure that the @font-face - "font family" names match on the elements you're trying to apply the font to. (I see variations of Agrandir Grand Heavy vs. Agrandir-GRANDHEAVY vs. agrandir).

2) ".header-nav *" & "p" selectors, use a font family that isn't installed on your website or installed correctly.

3) On the following lines -- You do not need to use "src:local". In-fact, if that works for you, you may be the only one able to view it because it's calling for a locally stored item on your computer.

4) Once you've made the changes or uploaded a font to your website you can check if the fonts are installed correctly by "inspecting" the text and viewing the "Fonts Used" tab within the inspection window. For me, you're defaulting to "Poppins" and "Times New Roman" fonts.

5) A minor issue that might not effect anything at the moment would be having extra comma following "h1,h2,h3,h4..."

Hope this helps. Let me know if you have any more questions.


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...