atfirstblink

August 12, 2023

@Lesum can you give me a price quote for this please so I can quote the client accordingly. You can email me on persis@atfirstblink.com thank you.

August 11, 2023

Hi everyone! I want to create a new site for my client and I am looking for a plug or help with CSS which will enable me to show different icons in a row and upon clicking or hovering on a particular icon it will change the background image and show text pertaining to each icon. A ref. example is here https://www.control4.com/ (check Section with heading "You are in Control").

Pls let me know if you know how can I achieve this with a paid plug in or any css course. Thank you.

June 26, 2023

On 5/30/2020 at 11:45 AM, tuanphan said:
use this
.header-nav-item--active a {
   background-image: none !important;
}

@tuanphan this isn't working for me

https://playseum-trial.squarespace.com/

pw: playseum

June 26, 2023

12 minutes ago, Afak said:

This might be what you're looking for:

//Testimonial mobile caption fix@media only screen and (max-width: 800px){.collection-type-index.design-slideshow .index-gallery .slide-meta .description {display:block;}}

sorry it says there is a syntax error with this code.

June 26, 2023

@tuanphan sorry the pw is: playseum

https://playseum-trial.squarespace.com/exhibits

I've shifted to summary blocks for the said issue. However I need help with the following:

1. Why are some of the content images sliding up and the rest not and how do i fix it?

2. How do I get the arrows up in the desktop view so that they sit in the centre of the image and not towards the bottom

3. Can I make the circles and arrows smaller than they are right now for the mobile view?

Please help. Thank you.

June 23, 2023

@tuanphan tried this CSS it doesn't seem to be working though. Can you pls check. Is there a way I can display the text under the banner instead of on it? Maybe that will make it better in the mobile view.

June 23, 2023

@tuanphan https://playseum-trial.squarespace.com/exhibits

June 23, 2023

@tuanphan sorry its here https://playseum-trial.squarespace.com/exhibits

June 23, 2023

How can I get my gallery captions to show on the mobile version?

https://playseum-trial.squarespace.com/

pw: playseumafb

I have added the following code but the text overlaps with the arrows on the sides. If someone can pls help me fix it or else remove the arrows in the mobile view? Thank you.

@media screen and (max-width:480px) { .sqs-gallery-block-slideshow .meta { opacity: 1 !important; display: block !important; } }

June 23, 2023

@tuanphan can you please advise me this

June 23, 2023

@tuanphan thanks a ton - works like a charm! 🙂

June 23, 2023

@tuanphan yes please 🙂

June 22, 2023

https://playseum-trial.squarespace.com/ (pw: playseumafb)

Is there a way to add a white background in the mobile menu overlay just behind the logo not the whole thing as the pink of the logo and the background are getting merged currently.

Please help me with the code if possible.

Thanks.

June 22, 2023

@tuanphan I have the same issue for a site. https://playseum-trial.squarespace.com/

pw: playseumafb

I have added the following code but the text doesn't display properly on all the images and also overlaps with the arrows on the sides. Can you pls help me fix it? Thank you.

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
	opacity: 1 !important;
	display: block !important;
}
}

April 4, 2023

On 4/3/2023 at 7:35 AM, tuanphan said:

I see you figured it out?

I just ended up buying a plug-in for this 🙂

March 30, 2023

@tuanphan This worked thanks but there are some glitches here. This is how the burger menu shows up when I click on the lines.

Also I need to move the button to the left of the logo and keep the burger lines on the right instead of both being adjacent to each other.

Pls help me fix this. https://playseum-trial.squarespace.com/

pw: playseum

March 25, 2023

@tuanphan can you help me isolate the "plan your visit" call to action button from the burger menu I've created and display it on the left side of the logo in the navigation pls?

https://playseum-trial.squarespace.com/

pw: playseum

January 7, 2023

Hi,

I've created this site on 7.1 https://latara-trial.squarespace.com/ (pw: latara) Since 7.1 wont let me assign specific fonts to header 1, 2, and 3 I've added a h4 with pinyon script as a font. I havent had to upload the font as it's provided in squarespace as a font. However, while I see it displaying on my laptop, I dont see it displayed on ipad or iphone browsers. Is there a way I can choose to add specific fonts for my headers as I could in 7.0? Pls help

Thank you.

December 29, 2022

@tuanphanThank you!! I think this did the trick for me. You're the best 🙂

December 29, 2022

59 minutes ago, tuanphan said:

I see you used 'Carefreeserif-extralight'

however it look likes you haven't declared font-face for this font yet.

I see you declared font for Carefree Serif and Sackers Italian Script Std only.

Also, you have invalid character in some font file url, it caused font file doesn't exist

@tuanphan

I did change the code quite a bit . It looks like this now

// Fontkit

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot');
src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'),
url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot');
src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'),
url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot');
src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'),
url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
font-weight: 200;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot');
src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'),
url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
font-weight: 200;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Sackers Italian Script Std';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot');
src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'),
url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}

// Custom Fonts Implement:

h1, h2 {font-family: 'CarefreeSerif-Regular'!important;
font-weight: normal;
font-style: normal;}

h1.BlogItem-title
{ font-size: 50px ;
font-family:'CarefreeSerif-extralight'!important;
font-weight: 200;
font-style: normal;}

h2.Index-gallery-item-content-heading
{ font-family: 'Carefreeserif-extralight'!important;
font-size: 65px;
font-weight: 200;
font-style: normal;
}

h4 {
color:#f6f3ef;
font-family: SackersItalianScriptStd !important;
font-weight: 500;
font-style: normal;
font-size:33px;
letter-spacing: 0em;
line-height: 0em;
margin-bottom:10px;
text-align: center;}

h5 {
color:#202020;
font-family: SackersItalianScriptStd !important;
font-weight: 500;
font-style: normal;
font-size:33px;
letter-spacing: 0em;
line-height: 0em;
margin-bottom:10px;
text-align: center;}

h6 {
color:#202020;
font-family: Archivo Narrow !important;
font-weight: 700;
font-style: normal;
font-size: 14px;
letter-spacing: 1.5px;
line-height: 25.2px;
margin-bottom: 10px;
text-transform: uppercase;
text-align: center;}

//

December 28, 2022

Hi Everyone,

I am trying to use two custom fonts on my site www.atfirstblink.com and I've tried all possible codes and loading the font files as eot, woff and woff2 but they still dont show up consistently. They neither on my ipad or iphone in safari or chrome on both. Below is the code I'm using. If someone can pls check and tell me what I'm doing wrong as I've been trying to fix this issue since 2 days now. Thanks.

// Fontkit

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot');
src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'),
url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot');
src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'),
url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot');
src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'),
url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
font-weight: 200;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot');
src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'),
url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
font-weight: 200;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Sackers Italian Script Std';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot');
src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'),
url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}

// Custom Fonts Implement:

h1 {font-family: 'CarefreeSerif-Regular'!important;
font-style: normal;}

h2 {font-family: 'CarefreeSerif-Regular'!important;
font-style: normal;}

h1.BlogItem-title
{ font-size: 50px ;
font-family:'CarefreeSerif-extralight'!important;
font-style: normal;}

h2.Index-gallery-item-content-heading
{ font-family: 'Carefreeserif-extralight'!important;
font-size: 65px;
}

h4 {
color:#f6f3ef;
font-family: SackersItalianScriptStd !important;
font-style: normal;
font-size:33px;
letter-spacing: 0em;
line-height: 0em;
margin-bottom:10px; }

//

December 28, 2022

I have the same issue. The custom fonts wont show up on my iphone and ipad's chrome and safari browsers. @tuanphan Can you pls help.

/ Fontkit

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot');
src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'),
url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot');
src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'),
url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot');
src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'),
url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
font-weight: 200;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot');
src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'),
url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
font-weight: 200;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Sackers Italian Script Std';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot');
src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'),
url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}

// Custom Fonts Implement:

h1, h2 {font-family: 'CarefreeSerif-Regular'!important;
font-weight: normal;
font-style: normal;}

h1.BlogItem-title
{ font-size: 50px ;
font-family:'CarefreeSerif-extralight'!important;
font-weight: 200;
font-style: normal;}

h2.Index-gallery-item-content-heading
{ font-family: 'Carefreeserif-extralight'!important;
font-size: 65px;
font-weight: 200;
font-style: normal;
}

h4 {
color:#f6f3ef;
font-family: SackersItalianScriptStd !important;
font-weight: 500;
font-style: normal;
font-size:33px;
letter-spacing: 0em;
line-height: 0em;
margin-bottom:10px; }

//

December 28, 2022

Hi Everyone,

I am trying to use two custom fonts on my site www.atfirstblink.com and I've tried all possible codes and loading the font files as eot, woff and woff2 but they still dont show up consistently. They neither on my ipad or iphone in safari or chrome on both. Below is the code I'm using. If someone can pls check and tell me what I'm doing wrong as I've been trying to fix this issue since 2 days now. Thanks.

// Fontkit

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot');
src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'),
url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot');
src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'),
url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot');
src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'),
url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
font-weight: 200;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot');
src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'),
url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
font-weight: 200;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Sackers Italian Script Std';
src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot');
src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'),
url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'),
url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}

// Custom Fonts Implement:

h1 {font-family: 'CarefreeSerif-Regular'!important;
font-style: normal;}

h2 {font-family: 'CarefreeSerif-Regular'!important;
font-style: normal;}

h1.BlogItem-title
{ font-size: 50px ;
font-family:'CarefreeSerif-extralight'!important;
font-style: normal;}

h2.Index-gallery-item-content-heading
{ font-family: 'Carefreeserif-extralight'!important;
font-size: 65px;
}

h4 {
color:#f6f3ef;
font-family: SackersItalianScriptStd !important;
font-style: normal;
font-size:33px;
letter-spacing: 0em;
line-height: 0em;
margin-bottom:10px; }

//

December 27, 2022

// Fontkit

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Italic.eot');
src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
url('CarefreeSerif-Italic.woff2') format('woff2'),
url('CarefreeSerif-Italic.woff') format('woff'),
url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Regular.eot');
src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
url('CarefreeSerif-Regular.woff2') format('woff2'),
url('CarefreeSerif-Regular.woff') format('woff'),
url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-Extralight.eot');
src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
url('CarefreeSerif-Extralight.woff2') format('woff2'),
url('CarefreeSerif-Extralight.woff') format('woff'),
url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
font-weight: 200;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Carefree Serif';
src: url('CarefreeSerif-ExtralightItalic.eot');
src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
url('CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
url('CarefreeSerif-ExtralightItalic.woff') format('woff'),
url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
font-weight: 200;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Sackers Italian Script Std';
src: url('SackersItalianScriptStd.eot');
src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
url('SackersItalianScriptStd.woff2') format('woff2'),
url('SackersItalianScriptStd.woff') format('woff'),
url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}

// Custom Fonts Implement:

h1 {font-family: 'CarefreeSerif-Regular'!important;
font-style: normal;}

h2 {font-family: 'CarefreeSerif-Regular'!important;
font-style: normal;}

h1.BlogItem-title
{ font-size: 40px;
font-family:'CarefreeSerif-Regular'!important;
font-style: normal;}

h2.Index-gallery-item-content-heading
{ font-family: 'Carefreeserif-extralight'!important;
font-size: 65px;
}

h4 {
color:#f6f3ef;
font-family: SackersItalianScriptStd !important;
font-style: normal;
font-size:33px;
letter-spacing: 0em;
line-height: 0em;
margin-bottom:10px; }

//

December 27, 2022

Hi, I've added custom fonts to my site www.atfirstblink.com, I'm unable to get them to show up consistently across all devices and browsers.

1. The Index Gallery font on the homepage doesn't show up at all

2. The heading 1 and heading 2 fonts show up on my laptop's Mac chrome and safari browser but not on my iphone or ipad's Chrome and Safari browser

3. The heading 4 font Sackers script only shows on my laptop browsers again.

I've loaded ttf, woff and woff2 files for the Carefree serif font as custom css. Can someone tell me how to fix the issue pls. Thanks.

@tuanphan I see you have helped a lot of people with the same issue. Can you pls check my code below and tell me where I'm going wrong.

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by atfirstblink

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources