Jump to content

Custom Font Not Working for Mobiel

Recommended Posts

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


When viewing the mobile version of my website on my desktop, the custom font is working. However, when I use my actual mobile device to view my website, my custom fonts are not loading. I have a few lines of code that affect the mobile version's line height and size, but I've tried taking them out and it still does not solve the problem. 

The custom CSS I've used is:

@font-face {
font-family: 'Outfit';
src: url('https://static1.squarespace.com/static/609d4703efea211d8e727dc9/t/625aec588f39aa45d3c1b992/1650125912669/Outfit-VariableFont_wght.ttf');

h1, h2, h3, h4 {
font-family: 'Outfit';}
p {
font-family: 'Outfit';}
misc {
font-family: 'Outfit';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: Outfit;

The first picture I've attached is how the mobile version looks on my desktop, the second is a phone screenshot of how it actually appears. Any help/ feedback would be greatly appreciated!

Screen Shot 2022-06-01 at 1.59.18 PM.png


Link to comment
  • Replies 1
  • Views 221
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.