Custom CSS font not working on mobile version

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

Hello!

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.

Hello,

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.

-Dan