Jump to content

Custom CSS font not working on mobile version

Recommended Posts

  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images


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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.