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

Link to comment
  • Replies 8
  • Views 462
  • Created
  • Last Reply

Hi,

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

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

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

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
ย 

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

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;
}

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

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

Contact Customer Careย - Learn CSSย - Buy me a coffeeย (thank you!)

Link to comment

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

๐Ÿ‘จโ€๐Ÿ”ง๐Ÿ‘จโ€๐Ÿ’ปย Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

๐Ÿ™‹โ€โ™‚๏ธย Squarespace Custom Web Development & Design

๐Ÿ“…ย Manage Tasks, Take Notes, and Upload Related Images

๐Ÿ“นย Squarespace Tutorials for free - YouTube๐Ÿ“นย 

๐Ÿ’ฏ๐Ÿš€ I have worked on over 200 Squarespace sites with custom code for over 9 years

๐Ÿ™‹โ€โ™‚๏ธย Let's connect on LinkedIn

ย 

ย 

Link to comment

Archived

This topic is now archived and is closed to further replies.

ร—
ร—
  • 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.