Custom Font doesn't load

sarahcurds · August 7, 2020

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

Harrietdavie · October 28, 2020

I found I recently had the same problem, but I just re-uploaded the fonts, and relinked them in the css by updating the url.

oscarsolanoc · August 23, 2022

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

tuanphan · August 23, 2022

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

oscarsolanoc · August 24, 2022

@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

tuanphan · August 25, 2022

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?

ruthob93 · September 13, 2022

I'm having this same problem. I have 6 sites, and am not having this problem on any of the other sites. The code is copy/pasted across so I don't believe it's a code error. Tried re-uploading and re-linking to no avail. Anybody have any tips pretty please?

paul2009 · September 13, 2022

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.

Venera · September 13, 2022

Today my custom font is not displayed on windows and changes to SERIF, but everything is fine from other devices. Could you check it only with me or is there a problem in windows?
https://www.veneramor.com/

Edited September 13, 2022 by Venera

paul2009 · September 13, 2022

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.

Venera · September 13, 2022

42 minutes ago, paul2009 said:

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.

Unfortunately they couldn't help me, I renamed the font and add it again and it worked.

paul2009 · September 13, 2022

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 🙂

Venera · September 13, 2022

6 minutes ago, paul2009 said:

Great workaround!

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

oh, big thanks! I haven't noticed where it doesn't work yet, but I'll replace it 🙂

RebelRuthDesignStudio · September 14, 2022

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

Alpen · September 15, 2022

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.

Alpen · September 15, 2022

@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 September 15, 2022 by Alpen

tuanphan · September 16, 2022

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

Alpen · September 16, 2022

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

tuanphan · September 17, 2022

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

It shows fine to me. Did you solve it?

DCC_MH · September 19, 2022

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

tuanphan · September 19, 2022

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?

tuanphan · September 20, 2022

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

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

LazW · September 21, 2022

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

tuanphan · September 21, 2022

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

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)

ruthob93 · September 26, 2022

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.

Custom Font doesn't load

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

ruthob93

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

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources