Jump to content

Custom Font CSS Not Working in Mobile

Recommended Posts

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

Hi,

I've added a customer font in CSS. It works for desktop and looks like it is for mobile in squarespace, but when I go to look at it on my phone in a browser, it isn't showing up.

Code:

@font-face {
    font-family: 'La Angelie';
       src: url('CreativeMarket');
}

h1 {font-family: 'La Angelie';}
h2 {font-family: 'La Angelie';}
h3 {font-family: 'La Angelie';}
h4 {font-family: 'La Angelie';}
 

Site Link: www.kourtnieandcaleb.com

Password: wedding

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

You aren't defining the source URL:  src: url('CreativeMarket'); <- this needs to contain the URL location of the font that you've uploaded. You upload the font in the Custom CSS, at the bottom.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
1 hour ago, Ziggy said:

You aren't defining the source URL:  src: url('CreativeMarket'); <- this needs to contain the URL location of the font that you've uploaded. You upload the font in the Custom CSS, at the bottom.

I changed the code to:

@font-face {
    font-family: 'La Angelie';
       src: url('https://creativemarket.com/mila.garret/6621084-La-Angelie-Wedding-Calligraphy-Font');
}

h1 {font-family: 'La Angelie';}
h2 {font-family: 'La Angelie';}
h3 {font-family: 'La Angelie';}
h4 {font-family: 'La Angelie';}

 

Is that what you meant? It still isn't working

Link to comment

This link is not an uploaded font, it is a website:
https://creativemarket.com/mila.garret/6621084-La-Angelie-Wedding-Calligraphy-Font

You need to download or purchase a font, then upload it to your website Custom CSS, and then reference that URL in the above CSS.
 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 3 weeks later...

kourtnieriv did you get it fixed?

What I see is it looks like you're grabbing the url from where you bought it. You need to upload the font file to the squarespace css section, then put your cursor between the ' ' then click on the file you just uploaded under manage files and it will automatically paste your font url. 

it should look something like this: 

url('FontURLhttps://static1.squarespace.com/static/5e1ce8f116247578368a945c/t/6351b2da1df162256b217a2d/1666298586423/modernline.ttf');

The video on this page can help you: 

https://squaremuse.com/blog/how-to-upload-custom-fonts-squarespace

Link to comment
On 10/29/2022 at 2:00 AM, Loveitdesignco said:

kourtnieriv did you get it fixed?

What I see is it looks like you're grabbing the url from where you bought it. You need to upload the font file to the squarespace css section, then put your cursor between the ' ' then click on the file you just uploaded under manage files and it will automatically paste your font url. 

it should look something like this: 

url('FontURLhttps://static1.squarespace.com/static/5e1ce8f116247578368a945c/t/6351b2da1df162256b217a2d/1666298586423/modernline.ttf');

The video on this page can help you: 

https://squaremuse.com/blog/how-to-upload-custom-fonts-squarespace

Your example is invalid. You need to remove 'FontURL' from the code

image.thumb.png.814674254f52befb5b07683e08c25bca.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.