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.

Hi,

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

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

Sorry, I edited it to find a temporary solution while I can I use my custom webfont.

Here's the current URL:  https://www.saramendoza.co/quiz-margin

Thanks a lot 🙂

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
 

Sure, here they are:

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

https://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54f374264b4f47f9ce93/1624134899616/Margin+WOFF.woffhttps://static1.squarespace.com/static/605809d9a59404695757ccb0/t/60ce54f374264b4f47f9ce93/1624134899616/Margin+WOFF.woff

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 

Oh, I didn't see that... 

It worked on phones but not on pc browsers 😭😭😭

Attaching screenshots.

Thanks again 

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

Add the code without @media to apply the code on all screens