Jump to content

Custom Font doesn't load

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://turkey-emu-sd4a.squarespace.com/

Hi all, 

I've added Muli and Lato as custom fonts to my site. Lato is working well but on some browsers/devices another serif font shows instead of Muli for paragraphs. My code has worked fine for another site, also using the 7.1 template, so I'm baffled. Any ideas on how to troubleshoot would be very welcome? 

 

My custom code is below and I've uploaded a pic to show my fonts have been added as custom files. 

@font-face {   
font-family: 'Muli';   
src: url(https://static1.squarespace.com/static/5efccf013260ec23a0736abe/t/5efcd5307e7bab5539c1e493/1593627952821/Muli-Regular.ttf); 
}

@font-face {   
font-family: 'Lato';   
src: url(https://static1.squarespace.com/static/5efccf013260ec23a0736abe/t/5efcd4e8603e98547506a5bd/1593627880622/Lato-Regular.ttf); 
}

h1 {
  font-family: 'Lato';
}

h2 {
  font-family: 'Lato';
}

h3 {
  font-family: 'Lato';
}

h4 {
  font-family: 'Muli';
}

p {
  font-family: 'Muli';
}

Screenshot 2020-08-07 at 10.46.47.png

Link to comment
  • 2 months later...
  • 1 year later...

Site URL: http://www.hijuelo.org/

Hi everyone!

 

I have a little problem, I designed my website and applied the custom font as I saw in many tutorials. But after we published it, the font will not load 😕 . I revised many helpful post here but I can't seem to find and successfully apply a solution.

Thank you inadvance!

My web is hijuelo.org  and here is my code if it can help.

 

 

@font-face{
     font-family: 'Flama Semicondensed Bold';
     src: url ('https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf');
     font-weight: Bold;
}
 
h2 {
    font-family: 'Flama Semicondensed Bold',Bold;
}

@font-face{
     font-family: 'Flama Semicondensed Bold';
     src: url ('https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf');
     font-weight: Bold;
}
 
h1{
     font-family: 'Flama Semicondensed Bold';
}

@font-face{
     font-family: 'Flama Semicondensed Bold';
     src: url ('https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf');
     font-weight: Bold;
}
 
h3 {
     font-family: 'Flama Semicondensed Bold';
}
@font-face{
     font-family: 'Flama-Medium';
     src: url ('https://static1.squarespace.com/static/6301439043b781745030397f/t/630281c9e88e0662bee37c8f/1661108681741/Flama-Medium.otf');
     font-weight: Medium;
}
 
h4 {
     font-family: 'Flama-Medium';
}
h4 {
 letter-spacing: 0.3em;
  text-transform: uppercase;
}

Link to comment
  • Solution

Your font face code, in Custom CSS, different code you posted here. It missing some code. Use this new

@font-face {
    font-family: 'Flama Semicondensed Bold';
    src: url(https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf);
}
h2, h1, h3, .header-nav-item a {
    font-family: 'Flama Semicondensed Bold';
}
@font-face {
    font-family: 'Flama-Medium';
    src: url(https://static1.squarespace.com/static/6301439043b781745030397f/t/630281c9e88e0662bee37c8f/1661108681741/Flama-Medium.otf);
}
h4, .sqs-block-button-element--small,.sqs-button-element--tertiary, .header-actions-action .btn {
    font-family: 'Flama-Medium';
}

 

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
9 hours ago, oscarsolanoc said:

@tuanphan Thank you very much!!! You're a life saver.

Also if you don't mind, do you know how can I change the font also on the mobile menu?

Thank you very much in advance!

Regards

You mean Mobile Menu items?

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
  • 3 weeks later...
1 minute ago, ruthob93 said:

I'm having this same problem.

Whenever you post a question, please include a working link to your site so that forum users can take a look at the site and the code being used. The post How to Post a Forum Question provides more detail.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
4 minutes ago, Venera said:

Today my custom font is not displayed on windows and changes to SERIF, but everything is fine from other devices.

This is currently an issue on all devices. This appears to be a Squarespace issue (due to a CORS policy issue) so I recommend that you reach out to Squarespace Customer Care

image.thumb.png.db2df5312d8018e9412a6425af29bbc0.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
2 minutes ago, Venera said:

I renamed the font and add it again and it worked.

Great workaround! 

There's still a problem with Utopia+Std+Black+Headline.woff so you may want to do the same with this 🙂

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hi guys,

Hoping someone can help me with something similar to above. 

I've added in custom CSS code for my fonts across my site, and I can view it fine but my client cannot. I've checked the code and can't see any issues. Can anyone help to as to why I can view it on my mac but she can not view it on her mac? We are both using Google Chrome. 

She cannot see any of the custom fonts I've used across the site.

Screenshots are of what I can see, and what she can see. 

Pasting the code below.
Please help! I've never had this issue before and stuck on how to troubleshoot.

Website is www.lexhamilton.co.uk password is ruthh

Thanks in advance,
Ruth

 



 

@font-face {
font-family: LOSTLOVERSITALIC;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c158173779139047b343/1654702424092/LostLoversItalic.ttf) !important;
}

@font-face {
font-family: LOSTLOVERSREG;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c88bc2322a3c168f7da1/1654704267223/LostLoversRegular.ttf) !important; 
}

@font-face {
font-family: ANALOGUE;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c18e85ef19473da9369d/1654702479025/Analogue.otf) !important;
}

@font-face {
font-family: JULES;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c1a7677f6b5013ed53f9/1654702504085/Jules-Regular.otf) !important;
}


h1 {
font-family: 'Analogue'!important;
}

h2 {
font-family: 'JULES'!important;
  
}

h3 {
font-family: 'LOSTLOVERSREG'!important;
  
}

h4 {
font-family: 'JULES'!important;
}

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

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

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

// Site Title //
.header-title-text a {
  font-family: analogue !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: analogue !important;
}

// Button //
.header-actions-action .btn {
  font-family: analogue !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: analogue !important;
}

// Small Button //
.sqs-block-button-element--small {
  font-family: analogue !important;
}

// Medium Button //
.sqs-block-button-element--medium {
  font-family: analogue !important;
}

// Large Button //
.sqs-block-button-element--large {
  font-family: analogue !important;
}

// Image Block Button //
.image-button a {
font-family: analogue !important;
}

// Blog Page Post Title //
.blog-title {
  font-family: analogue !important;
}

// Blog Page Post Descriptions //
.blog-excerpt p {
  font-family: analogue !important;
}

// Blog Page Read More Link //
.blog-more-link {
  font-family: analogue !important;
}

// Blog Post Entry Titles //
 .blog-item-title h1.entry-title {
  font-family: analogue !important;
}

h3.portfolio-title {
  font-family: analogue !important;
    font-size: 25px !important;
}

.header-menu-nav-item a {
   font-family: analogue !important;

}

.homepage #block-dec3b3e50716f5db7636 {
    animation: fade-me-in 2s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}

[data-section-id="62a0da54a3d9b23ac4d2fa8c"] .content-wrapper{
padding-left: 0!important;
padding-right: 0!important;
margin: 0!important
}

.Marquee {
width:100vw!important
}

#page{
overflow-x: hidden
}


[data-section-id="62a0f38a866ba666d895af90"] .content-wrapper{
padding-left: 0!important;
padding-right: 0!important;
margin: 0!important
}

.Marquee {
width:100vw!important
}

#page{
overflow-x: hidden
}


body { 
border:15px solid #680e12;
}

header { 
margin:15px 15px 0 15px;
}

@media only screen and (min-width: 640px){
[data-section-id="62a1b74522d81635bc7069e1"] .section-background {
 width: 50%;
 margin-left: 50%!important;
  background-color:#ea899e
}
section[data-section-id="62a1b74522d81635bc7069e1"] .content-wrapper {
 width: 50%;
 margin-left: 0%!important;
  background-color:#ea899e
 }
}

@media only screen and (min-width: 640px){
section[data-section-id="62a1b80d2def6f30e9cf3a10"] .section-background {
 width: 50%
}
section[data-section-id="62a1b80d2def6f30e9cf3a10"] .content-wrapper {
 width: 50%;
 margin-left: 50%!important;
    background-color:#b62b35
 }
  
  
  
  .header-nav-folder-content {
  background: transparent !important;
}
}


/* add header nav hover effect */
.header-nav-wrapper a:hover {
color: #dc8e9f !important;
}

b0bea1af-f23b-400e-bd8f-e96db7af064f.JPG

Screenshot 2022-09-14 at 15.18.54.png

Screenshot 2022-09-14 at 15.18.17.png

PHOTO-2022-09-13-19-13-48.jpg

Link to comment

Hi there,

I used the code above to insert a custom font using there CSS Editor which worked great. Thankyou.

Only issue is it has only applied to the Headings. I guess therefore there is code required to apply it to all elements on my website. I guess there is jo way of doing this glibly and it can only be applied to one section at a time? Where can I find the code references for all elements so that I can apply to all?

Thankyou.

Link to comment
@font-face {
    font-family: 'Flama Semicondensed Bold';
    src: url(https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf);
}
h2, h1, h3, p1, p2, p3, p4 .header-nav-item a {
    font-family: 'Flama Semicondensed Bold';
}

Would this code be modified as above to include p1, p2, p3, p4 text?

Also how do you do the primary and secondary buttons as well as the Main titles?

Thanks 🙂

 

Edited by Alpen
Link to comment
7 hours ago, Alpen said:
@font-face {
    font-family: 'Flama Semicondensed Bold';
    src: url(https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf);
}
h2, h1, h3, p1, p2, p3, p4 .header-nav-item a {
    font-family: 'Flama Semicondensed Bold';
}

Would this code be modified as above to include p1, p2, p3, p4 text?

Also how do you do the primary and secondary buttons as well as the Main titles?

Thanks 🙂

 

p1, p2, p3 = p

If you want to apply to every element, use *

It will be

@font-face {
    font-family: 'Flama Semicondensed Bold';
    src: url(https://static1.squarespace.com/static/6301439043b781745030397f/t/6302807e761f1941543bc68f/1661108350836/Flama+Semicondensed+Bold.otf);
}
* {
	font-family: 'Flama Semicondensed Bold' !important;
}

 

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

Awesome thanks.. How about if I want to use the bold one for all the headers, and the regular for everything else..

It's only this section of the code I need to understand better:

}
h2, h1, h3, .header-nav-item a {
}
h4, .sqs-block-button-element--small,.sqs-button-element--tertiary, .header-actions-action .btn {
    font-family: 'Flama-Medium';
}

 

Appreciate the help.

Many thanks

Link to comment
On 9/14/2022 at 9:21 PM, RebelRuthDesignStudio said:

Hi guys,

Hoping someone can help me with something similar to above. 

I've added in custom CSS code for my fonts across my site, and I can view it fine but my client cannot. I've checked the code and can't see any issues. Can anyone help to as to why I can view it on my mac but she can not view it on her mac? We are both using Google Chrome. 

She cannot see any of the custom fonts I've used across the site.

Screenshots are of what I can see, and what she can see. 

Pasting the code below.
Please help! I've never had this issue before and stuck on how to troubleshoot.

Website is www.lexhamilton.co.uk password is ruthh

Thanks in advance,
Ruth

 



 

@font-face {
font-family: LOSTLOVERSITALIC;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c158173779139047b343/1654702424092/LostLoversItalic.ttf) !important;
}

@font-face {
font-family: LOSTLOVERSREG;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c88bc2322a3c168f7da1/1654704267223/LostLoversRegular.ttf) !important; 
}

@font-face {
font-family: ANALOGUE;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c18e85ef19473da9369d/1654702479025/Analogue.otf) !important;
}

@font-face {
font-family: JULES;
src: url(https://static1.squarespace.com/static/62a0b47135b237316028425d/t/62a0c1a7677f6b5013ed53f9/1654702504085/Jules-Regular.otf) !important;
}


h1 {
font-family: 'Analogue'!important;
}

h2 {
font-family: 'JULES'!important;
  
}

h3 {
font-family: 'LOSTLOVERSREG'!important;
  
}

h4 {
font-family: 'JULES'!important;
}

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

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

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

// Site Title //
.header-title-text a {
  font-family: analogue !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: analogue !important;
}

// Button //
.header-actions-action .btn {
  font-family: analogue !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: analogue !important;
}

// Small Button //
.sqs-block-button-element--small {
  font-family: analogue !important;
}

// Medium Button //
.sqs-block-button-element--medium {
  font-family: analogue !important;
}

// Large Button //
.sqs-block-button-element--large {
  font-family: analogue !important;
}

// Image Block Button //
.image-button a {
font-family: analogue !important;
}

// Blog Page Post Title //
.blog-title {
  font-family: analogue !important;
}

// Blog Page Post Descriptions //
.blog-excerpt p {
  font-family: analogue !important;
}

// Blog Page Read More Link //
.blog-more-link {
  font-family: analogue !important;
}

// Blog Post Entry Titles //
 .blog-item-title h1.entry-title {
  font-family: analogue !important;
}

h3.portfolio-title {
  font-family: analogue !important;
    font-size: 25px !important;
}

.header-menu-nav-item a {
   font-family: analogue !important;

}

.homepage #block-dec3b3e50716f5db7636 {
    animation: fade-me-in 2s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}

[data-section-id="62a0da54a3d9b23ac4d2fa8c"] .content-wrapper{
padding-left: 0!important;
padding-right: 0!important;
margin: 0!important
}

.Marquee {
width:100vw!important
}

#page{
overflow-x: hidden
}


[data-section-id="62a0f38a866ba666d895af90"] .content-wrapper{
padding-left: 0!important;
padding-right: 0!important;
margin: 0!important
}

.Marquee {
width:100vw!important
}

#page{
overflow-x: hidden
}


body { 
border:15px solid #680e12;
}

header { 
margin:15px 15px 0 15px;
}

@media only screen and (min-width: 640px){
[data-section-id="62a1b74522d81635bc7069e1"] .section-background {
 width: 50%;
 margin-left: 50%!important;
  background-color:#ea899e
}
section[data-section-id="62a1b74522d81635bc7069e1"] .content-wrapper {
 width: 50%;
 margin-left: 0%!important;
  background-color:#ea899e
 }
}

@media only screen and (min-width: 640px){
section[data-section-id="62a1b80d2def6f30e9cf3a10"] .section-background {
 width: 50%
}
section[data-section-id="62a1b80d2def6f30e9cf3a10"] .content-wrapper {
 width: 50%;
 margin-left: 50%!important;
    background-color:#b62b35
 }
  
  
  
  .header-nav-folder-content {
  background: transparent !important;
}
}


/* add header nav hover effect */
.header-nav-wrapper a:hover {
color: #dc8e9f !important;
}

b0bea1af-f23b-400e-bd8f-e96db7af064f.JPG

Screenshot 2022-09-14 at 15.18.54.png

Screenshot 2022-09-14 at 15.18.17.png

PHOTO-2022-09-13-19-13-48.jpg

It shows fine to me. Did you solve it?

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

Hello! I work for a not-for-profit and am having very similar issues with the font not displaying correctly on all pages. It will not load on certain pages on mobile. 

Website: litclub4kids.com.au/faq - this is a page where it is not working correctly

PW: testing 

CODE: 

@font-face {
font-family: Manjari;
src: url(https://static1.squarespace.com/static/621829b8c87c622787ef72c5/t/62182d52771a7c2c74d8873a/1645751634911/Manjari-Bold.ttf);
}
h1 {
font-family: 'Manjari';
}

h2 {
font-family: 'Manjari';
}

h3 {
font-family: 'Manjari';
}

 

Any help you can offer is much appreciated!! @tuanphan @paul2009 

 

Thank you, 

Meg

font issue.jpg

Link to comment
On 9/16/2022 at 3:14 PM, Alpen said:

Awesome thanks.. How about if I want to use the bold one for all the headers, and the regular for everything else..

It's only this section of the code I need to understand better:

}
h2, h1, h3, .header-nav-item a {
}
h4, .sqs-block-button-element--small,.sqs-button-element--tertiary, .header-actions-action .btn {
    font-family: 'Flama-Medium';
}

 

Appreciate the help.

Many thanks

Hi,

You will need 2 font files to do this. Do you have 2?

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
On 9/19/2022 at 7:01 AM, DCC_MH said:

Hello! I work for a not-for-profit and am having very similar issues with the font not displaying correctly on all pages. It will not load on certain pages on mobile. 

Website: litclub4kids.com.au/faq - this is a page where it is not working correctly

PW: testing 

CODE: 

@font-face {
font-family: Manjari;
src: url(https://static1.squarespace.com/static/621829b8c87c622787ef72c5/t/62182d52771a7c2c74d8873a/1645751634911/Manjari-Bold.ttf);
}
h1 {
font-family: 'Manjari';
}

h2 {
font-family: 'Manjari';
}

h3 {
font-family: 'Manjari';
}

 

Any help you can offer is much appreciated!! 

 

Thank you, 

Meg

font issue.jpg

It looks like you changed layout & remove code? Can you check it again?

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

Site URL: https://marigold-mackerel-gb6k.squarespace.com/

Hi all,

I've seen a lot of posts about custom font issues recently, but I'm so confused about what's going on with my latest site build. I bought the Web Font License from Din Studio (https://din-studio.com/product/safira-march/) and put it into Custom CSS using @font-face, but it isn't displaying correctly. I've attached a photo to show how the font should look and what it is looking like on the website. I've tried uploading it as otf, ttf and most recently using woff ( as per this tutorial - https://www.arohavisuals.com/blog/best-way-to-upload-custom-fonts-squarespace), and none of them are displaying the font as it should be.

Am I doing anything wrong or is it Squarespace? Unfortunately, I've just spent quite a lot on the License so I'm going to be gutted if I can't get it to work.

Any help would be so appreciated! Thanks!

Password: lalaforbusiness

Font Problems.jpg

Link to comment
6 hours ago, LazW said:

Site URL: https://marigold-mackerel-gb6k.squarespace.com/

Hi all,

I've seen a lot of posts about custom font issues recently, but I'm so confused about what's going on with my latest site build. I bought the Web Font License from Din Studio (https://din-studio.com/product/safira-march/) and put it into Custom CSS using @font-face, but it isn't displaying correctly. I've attached a photo to show how the font should look and what it is looking like on the website. I've tried uploading it as otf, ttf and most recently using woff ( as per this tutorial - https://www.arohavisuals.com/blog/best-way-to-upload-custom-fonts-squarespace), and none of them are displaying the font as it should be.

Am I doing anything wrong or is it Squarespace? Unfortunately, I've just spent quite a lot on the License so I'm going to be gutted if I can't get it to work.

Any help would be so appreciated! Thanks!

Password: lalaforbusiness

Font Problems.jpg

I tried click a font & file doesn't exist. Try checking again

https://static1.squarespace.com/static/632a65f752df771ab0225d81/t/632a78e0720ff1455797fe47/1663727840865/SafiraMarch-Regular.woff2

 

(Upload files, sometimes it won't work on Trial Plan)

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
On 9/13/2022 at 2:59 PM, paul2009 said:

Whenever you post a question, please include a working link to your site so that forum users can take a look at the site and the code being used. The post How to Post a Forum Question provides more detail.

Thank you Paul, on this occasion I actually managed to resolve the issue.

In case it is useful to anyone - I got it working by removing all the relevant CSS, deleting the files, re-uploading the files and re-introducing the CSS.

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.