Jump to content

My custom Webfonts don't work

Recommended Posts

Site URL: https://www.saramendoza.co/quiz-margin

Hi,

I'm using custom webfonts for my website. The ones that are from Adobe Fonts are working perfectly, but the ones that I manually uploaded are not working at all 😞 

There are 2 images attached, one shows where I uploaded the fonts to the site and the other shows custom CSS in the specific pages where I'm using those fonts, as they're not for the whole site.

I would really appreciate your help.

Kindly,

Sara.

Screen Shot 2021-06-22 at 12.11.05 PM.png

Screen Shot 2021-06-22 at 12.13.40 PM.png

Edited by laesquinafeliz
Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

Try to put the URLs in quotes("").

The url does not work: https://www.saramendoza.co/quiz-elegante-fashionista

Edited by sorca_marian
Link to comment

Can you send the URLs of the webfonts so I can try to add them?

Or better, paste both code sections from above so it works faster to make changes
 

Link to comment

Now I noticed the problem.
The URLs are incorrect and added twice.

Instead of https://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54ec3838956a5acaa99e/1624134892867/Margin+OTF.otfhttps://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54ec3838956a5acaa99e/1624134892867/Margin+OTF.otf
Try
https://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54ec3838956a5acaa99e/1624134892867/Margin+OTF.otf
 

Follow this syntax: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp 

@font-face {
font-family : 'Family';
font-style : normal;
src: url('../fonts/Family-Book.otf');
font-weight: 400;
}
 
@font-face {
font-family : 'Family';
font-style : normal;
src: url('../fonts/Family-Demi.otf');
font-weight: 500;
}
 
@font-face {
font-family : 'Family';
font-style : normal;
src: url('../fonts/Family-Bold.otf');
font-weight: 700;
}
Edited by sorca_marian
Link to comment

Edit 640px in this code

@media only screen and (max-width: 640px) {
    body,h1,h2,h3,h4 {
        word-wrap:normal;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        hyphens: none
    }

    @font-face {
        font-family: 'Margin';
        src: url(https://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54ec3838956a5acaa99e/1624134892867/Margin+OTF.otf),url(https://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54f374264b4f47f9ce93/1624134899616/Margin+WOFF.woff)
    }
}

to 9640px

 

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.