Custom Font Not Working

HollyR · April 13, 2022

Site URL: https://www.careerspace.co.nz/

Hi, custom font is not working. This is not my area of expertise and would really appreciate some advice on what is missing. Here is the code. Many thanks in advance!

@font-face {

font-family:'kiona-light'

src url ('https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf')

}

h1,h2, h3, h4, h5 {

font-family:'kiona-light'

}

p1 {

font-family:'kiona-light'

}

Web_Solutions · April 13, 2022

You made some mistake in the code. Remove previous code and add this code Design > Custom CSS

@font-face {
  font-family: 'kiona-light';
  src: url(https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf);
}

h1, h2, h3, h4, h5 {
  font-family:'kiona-light';
}
p {
  font-family: 'kiona-light';
}

Jia · April 13, 2022

12 hours ago, HollyR said:

Site URL: https://www.careerspace.co.nz/

Hi, custom font is not working. This is not my area of expertise and would really appreciate some advice on what is missing. Here is the code. Many thanks in advance!

@font-face {

font-family:'kiona-light'

src url ('https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf')

}

h1,h2, h3, h4, h5 {

font-family:'kiona-light'

}

p1 {

font-family:'kiona-light'

}

Hi, it might be due to an error in the format of your code. Try this instead and let me know how it goes 🙂

@font-face {
  font-family: 'Kiona-Light';
  src: url('https://static1.squarespace.com/static/61636f178ba836289e08a2d5/t/616394b321324671f8c2283e/1633916083358/FontsFree-Net-Kiona-Light.ttf'')  format('truetype');
}

HollyR · April 18, 2022

Hi there, apologies I have realised since that I have missed out some important information in my question. Heading 1 needs to be Kiona and Headings 2, 3 & 4 need to be Kiona Light. Heading 5 doesnt appear to feature in my site. The other important piece of information is that all paragraph font (paragraph 1, 2 & 3) is a different font: Poppins font. Poppins is listed as the font under site styles. So the custom font needs to be such that it doesnt over-ride the current paragraph Poppins font. Hope that makes sense and many thanks in advance, I really appreciate the help on this!

tuanphan · April 22, 2022

On 4/19/2022 at 4:14 AM, HollyR said:

Hi there, apologies I have realised since that I have missed out some important information in my question. Heading 1 needs to be Kiona and Headings 2, 3 & 4 need to be Kiona Light. Heading 5 doesnt appear to feature in my site. The other important piece of information is that all paragraph font (paragraph 1, 2 & 3) is a different font: Poppins font. Poppins is listed as the font under site styles. So the custom font needs to be such that it doesnt over-ride the current paragraph Poppins font. Hope that makes sense and many thanks in advance, I really appreciate the help on this!

Did you solve or still need help?

HollyR · May 4, 2022

Thank you @tuanphan I have sent you an email 🙂

Mrhector · May 5, 2023

Hi mine is not working either. 😞

I can see the fonts on my desktop but not on my mobile.

here's the code"

font-face {
font-family: 'PPAcma-Thin';
src: url('https://static1.squarespace.com/static/6453eeaf6bf01e2085369aac/t/6453efaff08986661a2ba075/1683222448128/PPAcma-Thin.otf');
}

h1 {
font-family: 'PPAcma-Thin';
letter-spacing: -8px;
}

here's the site:

maim.ai

thanks

tuanphan · May 8, 2023

@font-face

not

font-face

Sheena1995 · May 31, 2023

Hi,

Mine is not working too. Can you check if I did the codes correctly?

@font-face {
font-family: 'Daydream';
src: url('https://static1.squarespace.com/static/64636e3a78a5397f8f328335/t/647793d6c5f56e76a43d1168/1685558230404/daydream+FREE.ttf');
}
h1 {
font-family: 'Daydream';

}

tuanphan · June 2, 2023

On 6/1/2023 at 2:49 AM, Sheena1995 said:

Hi,

Mine is not working too. Can you check if I did the codes correctly?

@font-face {
font-family: 'Daydream';
src: url('https://static1.squarespace.com/static/64636e3a78a5397f8f328335/t/647793d6c5f56e76a43d1168/1685558230404/daydream+FREE.ttf');
}
h1 {
font-family: 'Daydream';

}

What is your site url?

1to3go · June 2, 2023

Mine is not working either! Any help?

---------------------------------------------------------

@font-face {
font-family: AvenirLTStd-Book;
src: url(https://static1.squarespace.com/static/64679645254756010b7379ff/t/6467f4b2a01df3421a44ddff/1684534450492/AvenirLTStd-Book.otf);
}

@font-face {
font-family: News Gothic Regular;
src: url(https://static1.squarespace.com/static/64679645254756010b7379ff/t/6467f4bfb16c233bb713ea35/1684534463663/News+Gothic+Regular.otf);
}

h1 {
font-family: 'AvenirLTStd-Book';
}

h2 {
font-family: 'AvenirLTStd-Book';
}

h3 {
font-family: 'AvenirLTStd-Book';
}

h4 {
font-family: 'AvenirLTStd-Book';
}

.sqsrte-large {
font-family: 'News Gothic Regular';
}

p {
font-family: 'News Gothic Regular';
}

.sqsrte-small {
font-family: 'News Gothic Regular';
}

tuanphan · June 8, 2023

On 6/3/2023 at 6:37 AM, 1to3go said:

Mine is not working either! Any help?

---------------------------------------------------------

@font-face {
font-family: AvenirLTStd-Book;
src: url(https://static1.squarespace.com/static/64679645254756010b7379ff/t/6467f4b2a01df3421a44ddff/1684534450492/AvenirLTStd-Book.otf);
}

@font-face {
font-family: News Gothic Regular;
src: url(https://static1.squarespace.com/static/64679645254756010b7379ff/t/6467f4bfb16c233bb713ea35/1684534463663/News+Gothic+Regular.otf);
}

h1 {
font-family: 'AvenirLTStd-Book';
}

h2 {
font-family: 'AvenirLTStd-Book';
}

h3 {
font-family: 'AvenirLTStd-Book';
}

h4 {
font-family: 'AvenirLTStd-Book';
}

.sqsrte-large {
font-family: 'News Gothic Regular';
}

p {
font-family: 'News Gothic Regular';
}

.sqsrte-small {
font-family: 'News Gothic Regular';
}

The code looks correct. What is site url? We can check easier

TanHowl · June 9, 2023

I'm not sure what I'm doing wrong, but I can't get the site to display my custom font. Any help much appreciated!

@font-face {
font-family: "GoldenYouthFontDuoScript";
src: url(https://static1.squarespace.com/static/624c303bd9ff9d5ac0d6c476/t/6482846bdc71a9372b401186/1686275180179/font.woff);
}

h1 {
font-family: 'GoldenYouthFontDuoScript';
}

David_KBS2023 · June 10, 2023

This is the CSS code I put into the Design section to change my font. I tried to debug this with ChatGPT and also tried several approaches. It's wasting my time and energy. Somebody can help, please!! So sorry. I am not an expert. Google can't help anymore and Squarespace doesn't want to. Thanks so much!

@font-face {
font-family: 'Montserrat';
src: url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6484671a5290055c897995f1/1686398746445/montserrat-light-webfont.woff2) format('woff2'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6484672997ab9904c2c05187/1686398762114/montserrat-lightitalic-webfont.woff2) format('woff2'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6482ef522639c12c72a6baf2/1686302548071/Montserrat-Light.ttf) format('ttf'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6482ef577aaace04b521f0c3/1686302552499/Montserrat-LightItalic.ttf) format('ttf'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/64846bb1b871e321e04238ca/1686399921328/montserrat-light-webfont.woff) format('woff'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/64846bb53d958166511f8b6a/1686399925557/montserrat-lightitalic-webfont.woff) format('woff');
}

body {
font-family: 'Montserrat';
}

tuanphan · June 11, 2023

On 6/9/2023 at 9:21 AM, TanHowl said:

I'm not sure what I'm doing wrong, but I can't get the site to display my custom font. Any help much appreciated!

@font-face {
font-family: "GoldenYouthFontDuoScript";
src: url(https://static1.squarespace.com/static/624c303bd9ff9d5ac0d6c476/t/6482846bdc71a9372b401186/1686275180179/font.woff);
}

h1 {
font-family: 'GoldenYouthFontDuoScript';
}

What is site url? We can check easier

tuanphan · June 11, 2023

19 hours ago, David_KBS2023 said:

This is the CSS code I put into the Design section to change my font. I tried to debug this with ChatGPT and also tried several approaches. It's wasting my time and energy. Somebody can help, please!! So sorry. I am not an expert. Google can't help anymore and Squarespace doesn't want to. Thanks so much!

@font-face {
font-family: 'Montserrat';
src: url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6484671a5290055c897995f1/1686398746445/montserrat-light-webfont.woff2) format('woff2'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6484672997ab9904c2c05187/1686398762114/montserrat-lightitalic-webfont.woff2) format('woff2'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6482ef522639c12c72a6baf2/1686302548071/Montserrat-Light.ttf) format('ttf'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/6482ef577aaace04b521f0c3/1686302552499/Montserrat-LightItalic.ttf) format('ttf'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/64846bb1b871e321e04238ca/1686399921328/montserrat-light-webfont.woff) format('woff'),
url(https://static1.squarespace.com/static/620f452d58d06a51e2f22e9a/t/64846bb53d958166511f8b6a/1686399925557/montserrat-lightitalic-webfont.woff) format('woff');
}

body {
font-family: 'Montserrat';
}

Montserrat is a font in SS, so you can use it without declaring font-face

TanHowl · June 12, 2023

17 hours ago, tuanphan said:

What is site url? We can check easier

https://www.bornbaremidwifery.com/

Thank you!

David_KBS2023 · June 12, 2023

19 hours ago, tuanphan said:

Montserrat is a font in SS, so you can use it without declaring font-face

Thanks a lot!!!

tuanphan · June 13, 2023

On 6/9/2023 at 9:21 AM, TanHowl said:

I'm not sure what I'm doing wrong, but I can't get the site to display my custom font. Any help much appreciated!

@font-face {
font-family: "GoldenYouthFontDuoScript";
src: url(https://static1.squarespace.com/static/624c303bd9ff9d5ac0d6c476/t/6482846bdc71a9372b401186/1686275180179/font.woff);
}

h1 {
font-family: 'GoldenYouthFontDuoScript';
}

Use this

@font-face {
    font-family: GoldenYouthFontDuoScript;
    src: url(https://static1.squarespace.com/static/624c303bd9ff9d5ac0d6c476/t/6482846bdc71a9372b401186/1686275180179/font.woff);
}

h1 {
    font-family: GoldenYouthFontDuoScript !important;
}

TanHowl · June 14, 2023

19 hours ago, tuanphan said:

@font-face {
    font-family: GoldenYouthFontDuoScript;
    src: url(https://static1.squarespace.com/static/624c303bd9ff9d5ac0d6c476/t/6482846bdc71a9372b401186/1686275180179/font.woff);
}

h1 {
    font-family: GoldenYouthFontDuoScript !important;
}

21 hours ago, tuanphan said:

Use this

@font-face {
    font-family: GoldenYouthFontDuoScript;
    src: url(https://static1.squarespace.com/static/624c303bd9ff9d5ac0d6c476/t/6482846bdc71a9372b401186/1686275180179/font.woff);
}

h1 {
    font-family: GoldenYouthFontDuoScript !important;
}

Thanks, but still not working! What am I missing? I'm inputting the code, clicking save and then refreshing the page..... and it stays the same. Any other ideas?

tuanphan · June 16, 2023

On 6/14/2023 at 12:27 PM, TanHowl said:

Thanks, but still not working! What am I missing? I'm inputting the code, clicking save and then refreshing the page..... and it stays the same. Any other ideas?

Can you share link to a page where you use h1? I don't see h1 on homepage now

kimmetry · July 28, 2023

Hi! I am having the same issue with my font ☹️

Website: https://www.reviveskinclinictx.com/

Code:

@font-face {
font-family: 'LaLuxesScript';
src: url(https://static1.squarespace.com/static/6228d464824cd27af8927d77/t/624eec2a23918822431f9c9d/1649339434993/LaLuxesScript.ttf);
}

h1, h2, h3, h4 {
font-family:'LaLuxesScript';
}
p {
font-family: 'LaLuxesScript';
}

sarahtheimpactcollective · July 28, 2023

I am having the same issue! Our site was designed a couple of years ago and the custom fonts have been working perfectly until about 1 week ago (I noticed Squarespace did a design update - wondering if this screwed it up??)

website: theimpactcollectivepdx.com

code:

// ADDING SOEHNE EXTRAFETT + LEICHT //

@font-face {
font-family: 'SOEHNE BREIT EXTRAFETT';
src: url('https://static1.squarespace.com/static/6009c96a13978160bf87bf21/t/601a2df30972f77fddc40b0a/1612328435724/soehne-breit-web-extrafett.woff'); }

@font-face {
font-family: 'SOEHNE BREIT LEICHT';
src: url('https://static1.squarespace.com/static/6009c96a13978160bf87bf21/t/601a2e29785c3434e1f106e0/1612328489904/soehne-breit-web-leicht.woff'); }

// STYLING HEADERS //
h1,h2,h3, h4 {font-family: 'SOEHNE BREIT EXTRAFETT';}
p {font-family: 'SOEHNE BREIT LEICHT';}

// STYLING NAV BUTTONS //
a.preFade.fadeIn{
font-family: 'SOEHNE BREIT EXTRAFETT';
}
.header-menu-nav-folder-content a{font-family: 'SOEHNE BREIT EXTRAFETT';}
a.theme-btn--primary.btn{ font-family: 'SOEHNE BREIT EXTRAFETT';}
.newsletter-form-button-label{ font-family: 'SOEHNE BREIT EXTRAFETT';}
input.button.sqs-system-button.sqs-editable-button{ font-family: 'SOEHNE BREIT EXTRAFETT';}
A.btn.btn--border.theme-btn--primary-inverse{ font-family: 'SOEHNE BREIT EXTRAFETT';}
.newsletter-form-header-title.preFade.fadeIn{font-family: 'SOEHNE BREIT EXTRAFETT';}

// Hide Site Title //
.homepage #siteTitle {display: none;}

/**/
.form-item.section.underline .title {
font-size: calc((2.8 - 1) * 1.2vw + 1rem) !important;
}

///SMOOTH SCROLL///

html {
scroll-behavior: smooth;
}

Shawzy · July 28, 2023

2 hours ago, sarahtheimpactcollective said:

I am having the same issue! Our site was designed a couple of years ago and the custom fonts have been working perfectly until about 1 week ago (I noticed Squarespace did a design update - wondering if this screwed it up??)

website: theimpactcollectivepdx.com

code:

// ADDING SOEHNE EXTRAFETT + LEICHT //

@font-face {
font-family: 'SOEHNE BREIT EXTRAFETT';
src: url('https://static1.squarespace.com/static/6009c96a13978160bf87bf21/t/601a2df30972f77fddc40b0a/1612328435724/soehne-breit-web-extrafett.woff'); }

@font-face {
font-family: 'SOEHNE BREIT LEICHT';
src: url('https://static1.squarespace.com/static/6009c96a13978160bf87bf21/t/601a2e29785c3434e1f106e0/1612328489904/soehne-breit-web-leicht.woff'); }

// STYLING HEADERS //
h1,h2,h3, h4 {font-family: 'SOEHNE BREIT EXTRAFETT';}
p {font-family: 'SOEHNE BREIT LEICHT';}

// STYLING NAV BUTTONS //
a.preFade.fadeIn{
font-family: 'SOEHNE BREIT EXTRAFETT';
}
.header-menu-nav-folder-content a{font-family: 'SOEHNE BREIT EXTRAFETT';}
a.theme-btn--primary.btn{ font-family: 'SOEHNE BREIT EXTRAFETT';}
.newsletter-form-button-label{ font-family: 'SOEHNE BREIT EXTRAFETT';}
input.button.sqs-system-button.sqs-editable-button{ font-family: 'SOEHNE BREIT EXTRAFETT';}
A.btn.btn--border.theme-btn--primary-inverse{ font-family: 'SOEHNE BREIT EXTRAFETT';}
.newsletter-form-header-title.preFade.fadeIn{font-family: 'SOEHNE BREIT EXTRAFETT';}

// Hide Site Title //
.homepage #siteTitle {display: none;}

/**/
.form-item.section.underline .title {
font-size: calc((2.8 - 1) * 1.2vw + 1rem) !important;
}

///SMOOTH SCROLL///

html {
scroll-behavior: smooth;
}

Having the same issue as of today on https://www.letsgusto.com/ - please advise!

Edited July 28, 2023 by Shawzy

hannahtempany_ · July 29, 2023

Having the same issue! I made a duplicate version of the website and the fonts work fine. Would love some assistance on this too.

@font-face {
font-family: Whyte-Light;
src: url(https://static1.squarespace.com/static/62e492f388008e2f8c8edf4d/t/64c4549a1ddc6e61690d73b8/1690588315468/Whyte+Light.ttf);
}

@font-face {
font-family: Whyte-Regular;
src: url(https://static1.squarespace.com/static/62e492f388008e2f8c8edf4d/t/64c454e1cb4ea16810e862fe/1690588385473/Whyte+Regular.ttf);
}

@font-face {
font-family: Baskerville-01;
src: url(https://static1.squarespace.com/static/62e492f388008e2f8c8edf4d/t/63005108fbb354055d9e9a63/1660965128978/Baskerville-01.ttf);
}

@font-face {
font-family: GT-Pressura-Mono-Light-Light;
src: url(https://static1.squarespace.com/static/62e492f388008e2f8c8edf4d/t/649fdebabd94602e27db0c17/1688198843127/GT+Pressura+Mono+Light+Light.ttf);
}

@font-face {
font-family: GT-Pressura-Mono-Text-Trial;
src: url(https://static1.squarespace.com/static/62e492f388008e2f8c8edf4d/t/64b22e52a45c5b65d6840290/1689398866788/GT-Pressura-Mono-Text-Trial.ttf);
}

h1 {
font-family: 'Whyte-Light';
letter-spacing: -0.060em;
line-height: 1em;
font-size: 50px;
text-transform: none;
}

/* Mobile font*/
@media only screen and (max-width: 640px) {
h1 {font-size:2.5rem !important}
h3 {font-size: 0.8rem !important}

}

h2 {
font-family: 'Whyte-Regular';
letter-spacing: 0.06em;
font-size: 13px;
text-transform: none;
line-height: 129.4%;
}

Custom Font Not Working

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Web_Solutions

Jia

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources