Custom Font Not Working

tuanphan · July 29, 2023

58 minutes ago, hannahtempany_ said:

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

Add this code under

h1, h2 {
	font-family: 'Whyte-Light' !important;
}

hannahtempany_ · July 29, 2023

Thank you

KatGray · July 29, 2023

Yes my custom font has stopped working too, code seems fine and also when I duplicate the site, the custom font seems to appear, not sure how to get it working again on my current site!

hannahtempany_ · July 29, 2023

@KatGray add !important for everything in that font. Mine worked fine after this, hope yours does too!

supertobyjr · July 30, 2023

Hi ,can someone help me with my code? It was working before and I'm not sure what happened to my header font. It should be the font Gallery. My site is www.vnco.studio

@font-face {
font-family: 'gal';
src: url('https://static1.squarespace.com/static/62f59793ae1eac76c4dd8c93/t/64c6a0fb8a61ea57c0ad92f2/1690738939446/Gallery+%281%29.ttf');
}

@font-face {
font-family: 'ligh';
src: url('https://static1.squarespace.com/static/62f59793ae1eac76c4dd8c93/t/62f5cd2a498d3a4da62127e9/1660276010559/Calibre-Light.ttf');
}

@font-face {
font-family: 'bold';
src: url('https://static1.squarespace.com/static/62f59793ae1eac76c4dd8c93/t/62f5cd28498d3a4da62127de/1660276008734/CalibreMedium.otf');
}

/*------------------------------------
* FONTS
*------------------------------------*/

.summary-title {
font-family: 'bold';
font-size: 30px !important;
}

.summary-excerpt.summary-excerpt-only p {
font-family: 'ligh' !important;
}

h4 {
font-family: 'gal';
}

h3 {
font-family: 'bold';
}

h2 strong {
font-family: 'gal';
}

p strong {
font-family: 'gal';

font-size: 30px;
font-weight: normal;
}

h1 {
font-family: 'gal';
}

p {
font-family: 'ligh';
}

.header-nav-item a {
font-family: 'ligh';
text-transform: uppercase;
font-size: 13px;
font-weight: 900 !important;
letter-spacing: 1px;

paperpalparty · July 30, 2023

Same with mine, it was working fine for months and then just suddenly stopped

@font-face {
font-family: OLIVER;
src: url(https://static1.squarespace.com/static/646bfe49b300e47db0c79348/t/6485046ce2da404e0f78ffa3/1686439020163/Oliver-Regular.ttf);
}
h3 {font-family: 'OLIVER';}

Paperpalparty.com

tuanphan · July 31, 2023

3 hours ago, supertobyjr said:

Hi ,can someone help me with my code? It was working before and I'm not sure what happened to my header font. It should be the font Gallery. My site is www.vnco.studio

@font-face {
font-family: 'gal';
src: url('https://static1.squarespace.com/static/62f59793ae1eac76c4dd8c93/t/64c6a0fb8a61ea57c0ad92f2/1690738939446/Gallery+%281%29.ttf');
}

@font-face {
font-family: 'ligh';
src: url('https://static1.squarespace.com/static/62f59793ae1eac76c4dd8c93/t/62f5cd2a498d3a4da62127e9/1660276010559/Calibre-Light.ttf');
}

@font-face {
font-family: 'bold';
src: url('https://static1.squarespace.com/static/62f59793ae1eac76c4dd8c93/t/62f5cd28498d3a4da62127de/1660276008734/CalibreMedium.otf');
}

/*------------------------------------
* FONTS
*------------------------------------*/

.summary-title {
font-family: 'bold';
font-size: 30px !important;
}

.summary-excerpt.summary-excerpt-only p {
font-family: 'ligh' !important;
}

h4 {
font-family: 'gal';
}

h3 {
font-family: 'bold';
}

h2 strong {
font-family: 'gal';
}

p strong {
font-family: 'gal';

font-size: 30px;
font-weight: normal;
}

h1 {
font-family: 'gal';
}

p {
font-family: 'ligh';
}

.header-nav-item a {
font-family: 'ligh';
text-transform: uppercase;
font-size: 13px;
font-weight: 900 !important;
letter-spacing: 1px;

Change this code

h4 {
  font-family: 'gal';
}

h3 {
  font-family: 'bold';
}

h2 strong {
  font-family: 'gal';
}

p strong {
  font-family: 'gal';
  
  font-size: 30px;
  font-weight: normal;
}

h1 {
  font-family: 'gal';
}

p {
  font-family: 'ligh';
}

.header-nav-item a {
  font-family: 'ligh';
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900 !important;
  letter-spacing: 1px;
}

to this

h4, h2, h1 {
  font-family: 'gal' !important;
}
h3 {
  font-family: 'bold' !important;
}

p strong {
  font-family: 'gal' !important;
  
  font-size: 30px;
  font-weight: normal;
}

p {
  font-family: 'ligh' !important;
}

.header-nav-item a {
  font-family: 'ligh' !important;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900 !important;
  letter-spacing: 1px;
}

tuanphan · July 31, 2023

3 hours ago, paperpalparty said:

Same with mine, it was working fine for months and then just suddenly stopped

@font-face {
font-family: OLIVER;
src: url(https://static1.squarespace.com/static/646bfe49b300e47db0c79348/t/6485046ce2da404e0f78ffa3/1686439020163/Oliver-Regular.ttf);
}
h3 {font-family: 'OLIVER';}

Paperpalparty.com

Change to this

@font-face {
font-family: OLIVER;
src: url(https://static1.squarespace.com/static/646bfe49b300e47db0c79348/t/6485046ce2da404e0f78ffa3/1686439020163/Oliver-Regular.ttf);
}
h3 {font-family: 'OLIVER' !important;}

paperpalparty · July 31, 2023

tuanphan

Thank you so much 🙂

wantwothree · July 31, 2023

Hello everyone! I've been having trouble with my custom fonts. All of a sudden, on Saturday, they were not displayed anymore. I've tried checking the CSS code and it was all fine, but it still doesn't work.
I've wrote the code again and would love some assistance!

My website url: wanraitelli.com

@font-face {
font-family: 'Recoleta';
src: url('https://static1.squarespace.com/static/64496862509e733f1be44584/t/64c77dc5b0d19d71ca57ceba/1690795461659/RecoletaAlt-Medium.ttf');
}
h1 {font-family: 'Recoleta'; !important}
h2 {font-family: 'Recoleta'; !important}
h3 {font-family: 'Recoleta'; !important}
h4 {font-family: 'Recoleta'; !important}

tuanphan · July 31, 2023

3 hours ago, wantwothree said:

Hello everyone! I've been having trouble with my custom fonts. All of a sudden, on Saturday, they were not displayed anymore. I've tried checking the CSS code and it was all fine, but it still doesn't work.
I've wrote the code again and would love some assistance!

My website url: wanraitelli.com

@font-face {
font-family: 'Recoleta';
src: url('https://static1.squarespace.com/static/64496862509e733f1be44584/t/64c77dc5b0d19d71ca57ceba/1690795461659/RecoletaAlt-Medium.ttf');
}
h1 {font-family: 'Recoleta'; !important}
h2 {font-family: 'Recoleta'; !important}
h3 {font-family: 'Recoleta'; !important}
h4 {font-family: 'Recoleta'; !important}

I see it worked to me

supertobyjr · July 31, 2023

Thank you!!

_Shakul_ · August 8, 2023

Hi - struggling with SquareSpace and loading in new fonts so any help is greatly appreciated.

I wanted to replace my "DINOT" font with a "DINOT-Lite" version, but everytime I try to load in the .otf file it gives a warning saying the file type cant be used. I converted the .otf to a .ttf and got the same warning? Was able to load in my previous .otf's fine a few weeks ago?

My fonts are also no longer displaying correctly, I wanted to add a specific size and colour to H2 and H3 - but it seems to have broken all the text back to defaults.

This is the code I'm currently using:

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

//FontTypes//

@font-face {font-family: 'SquadaOne';
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf978024396776f1c5dd9/1690106232740/SquadaOne-Regular.ttf)}

@font-face {font-family: ConduitITC;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf961b5f8dc6b637f72ed/1690106209901/Conduit+ITC+Regular.otf)}

@font-face {font-family: ConduitITC_Bold;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf95d5a0abe638b743697/1690106205642/Conduit+ITC+Bold.otf)}

@font-face {font-family: DINOT_Bold;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf917efd4733f43becc77/1690106135202/DINOT-Black.otf)}

@font-face {font-family: DINOT;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf900b5f8dc6b637f6eed/1690106112845/DINOT.otf)}

//FontStyles//

h1{font-family: 'SquadaOne';
letter-spacing:2px;
font-size:75px;
}

h2{font-family: 'SquadaOne';
letter-spacing:2px;
font-size:50px;
color:#95C11F;
}

h3{font-family: 'SquadaOne';
letter-spacing:2px;
font-size:50px;
color:#662483;
}

h4{font-family: 'DINOT_Bold' !important}

.sqsrte-large{font-family: 'SquadaOne' !important}

p{font-family: 'ConduitITC' !important}

.sqsrte-small{font-family: 'DINOT' !important}

.form-block * {
.sqs-block-summary-v2 {
.sqs-block-button-element {
.summary-title,
.summary-heading {
font-family: SquadaOne;
font-weight: 600;
font-size: 18px !important;
color: #33cccc;
}}}}

li>*:first-child::before {color:#FFFFFF;}

Edited August 8, 2023 by _Shakul_

tuanphan · August 9, 2023

18 hours ago, _Shakul_ said:

Hi - struggling with SquareSpace and loading in new fonts so any help is greatly appreciated.

I wanted to replace my "DINOT" font with a "DINOT-Lite" version, but everytime I try to load in the .otf file it gives a warning saying the file type cant be used. I converted the .otf to a .ttf and got the same warning? Was able to load in my previous .otf's fine a few weeks ago?

My fonts are also no longer displaying correctly, I wanted to add a specific size and colour to H2 and H3 - but it seems to have broken all the text back to defaults.

This is the code I'm currently using:

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

//FontTypes//

@font-face {font-family: 'SquadaOne';
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf978024396776f1c5dd9/1690106232740/SquadaOne-Regular.ttf)}

@font-face {font-family: ConduitITC;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf961b5f8dc6b637f72ed/1690106209901/Conduit+ITC+Regular.otf)}

@font-face {font-family: ConduitITC_Bold;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf95d5a0abe638b743697/1690106205642/Conduit+ITC+Bold.otf)}

@font-face {font-family: DINOT_Bold;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf917efd4733f43becc77/1690106135202/DINOT-Black.otf)}

@font-face {font-family: DINOT;
src: url(https://static1.squarespace.com/static/6489f503d3b59d456f35e6fe/t/64bcf900b5f8dc6b637f6eed/1690106112845/DINOT.otf)}

//FontStyles//

h1{font-family: 'SquadaOne';
letter-spacing:2px;
font-size:75px;
}

h2{font-family: 'SquadaOne';
letter-spacing:2px;
font-size:50px;
color:#95C11F;
}

h3{font-family: 'SquadaOne';
letter-spacing:2px;
font-size:50px;
color:#662483;
}

h4{font-family: 'DINOT_Bold' !important}

.sqsrte-large{font-family: 'SquadaOne' !important}

p{font-family: 'ConduitITC' !important}

.sqsrte-small{font-family: 'DINOT' !important}

.form-block * {
.sqs-block-summary-v2 {
.sqs-block-button-element {
.summary-title,
.summary-heading {
font-family: SquadaOne;
font-weight: 600;
font-size: 18px !important;
color: #33cccc;
}}}}

li>*:first-child::before {color:#FFFFFF;}

SS has a bug recently, you can reporting it to SS Customer Care.

In the mean time, you can send me files, I can upload it to my servers then send you links. Then if you SS fixed later, you can replace links then.

Sofiasyard · August 9, 2023

Hello guys,

I'm having this issue with 2 websites I developed: when they were published both lost their custom CSS fonts. However, everything is ok in the custom-css page:

// CUSTOM FONT

@font-face {

font-family: Rockinsoda;

src: url();
}

h1 {

font-family: 'Rockinsoda';}

h2 {

font-family: 'Rockinsoda';}

h3 {

font-family: 'Rockinsoda';}

h4 {

font-family: 'Rockinsoda';}

p {

font-family: 'Athletics';}

Inside the Squarespace edit version I can see the correct fonts, but not on the browser.

Has anyone had this issue before? Thanks!

DeltaJaxx · August 10, 2023

I have an issue where the following Custom CSS codes are not displaying my custom font in the Product Description Page of my products that I transferred from Etsy. Can anyone help me with this please.

My website is currently on a trial period and version 7.1

One listing that I created from scratch is showing the description with the custom font, without a problem.

@font-face {
font-family: Student Notes;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d36b8e0dddd8603dafc432/1691577232506/StudentNotes.otf);
}
.sqsrte-large {
font-family: 'Student Notes';
}
p {
font-family: 'Student Notes';
}
.sqsrte-small {
font-family: 'Student Notes';
}
@font-face {
font-family: Rainbow;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d37fe318d9917568db5698/1691582435385/Rainbow.otf);
}
h3 {
font-family: 'Student Notes';
}
.collection-type-products .ProductItem-details h2.ProductItem-details-title, .ProductItem .ProductItem-details .product-price {
font-family: "Student Notes";
}
h2 {
font-family:'Student Notes' !important;
}

tuanphan · August 11, 2023

On 8/10/2023 at 4:10 AM, Sofiasyard said:

Hello guys,

I'm having this issue with 2 websites I developed: when they were published both lost their custom CSS fonts. However, everything is ok in the custom-css page:

// CUSTOM FONT

@font-face {

font-family: Rockinsoda;

src: url();
}

h1 {

font-family: 'Rockinsoda';}

h2 {

font-family: 'Rockinsoda';}

h3 {

font-family: 'Rockinsoda';}

h4 {

font-family: 'Rockinsoda';}

p {

font-family: 'Athletics';}

Inside the Squarespace edit version I can see the correct fonts, but not on the browser.

Has anyone had this issue before? Thanks!

You need to enter real font url here

On 8/10/2023 at 7:10 AM, DeltaJaxx said:

I have an issue where the following Custom CSS codes are not displaying my custom font in the Product Description Page of my products that I transferred from Etsy. Can anyone help me with this please.

My website is currently on a trial period and version 7.1

One listing that I created from scratch is showing the description with the custom font, without a problem.

@font-face {
font-family: Student Notes;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d36b8e0dddd8603dafc432/1691577232506/StudentNotes.otf);
}
.sqsrte-large {
font-family: 'Student Notes';
}
p {
font-family: 'Student Notes';
}
.sqsrte-small {
font-family: 'Student Notes';
}
@font-face {
font-family: Rainbow;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d37fe318d9917568db5698/1691582435385/Rainbow.otf);
}
h3 {
font-family: 'Student Notes';
}
.collection-type-products .ProductItem-details h2.ProductItem-details-title, .ProductItem .ProductItem-details .product-price {
font-family: "Student Notes";
}
h2 {
font-family:'Student Notes' !important;
}

Change your code to this

@font-face {
font-family: Student Notes;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d36b8e0dddd8603dafc432/1691577232506/StudentNotes.otf);
}
.sqsrte-large, p, .sqsrte-small, h3, .collection-type-products .ProductItem-details h2.ProductItem-details-title, .ProductItem .ProductItem-details .product-price{
font-family: 'Student Notes' !important;
}
@font-face {
font-family: Rainbow;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d37fe318d9917568db5698/1691582435385/Rainbow.otf);
}
h2 {
  font-family:'Student Notes' !important;
}

If it doesn't work, please share site url, we can check easier

DeltaJaxx · August 17, 2023

On 8/11/2023 at 6:27 PM, tuanphan said:

You need to enter real font url here

Change your code to this

@font-face {
font-family: Student Notes;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d36b8e0dddd8603dafc432/1691577232506/StudentNotes.otf);
}
.sqsrte-large, p, .sqsrte-small, h3, .collection-type-products .ProductItem-details h2.ProductItem-details-title, .ProductItem .ProductItem-details .product-price{
font-family: 'Student Notes' !important;
}
@font-face {
font-family: Rainbow;
src: url(https://static1.squarespace.com/static/64d04f7d0640507c114d79c1/t/64d37fe318d9917568db5698/1691582435385/Rainbow.otf);
}
h2 {
  font-family:'Student Notes' !important;
}

If it doesn't work, please share site url, we can check easier

Hi - thank you very much for your help! 🙂

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

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources