AlexiaD

@creedon sorry the code doesn't work. I've tried both with/ without !important. Would you mind sharing the code you would use to make sure it displays correctly on every devices? Thank you!

@tuanphan thank you anyways - appreciate it.

I have another question - is there a way to adjust layout for any screen? My website's been designed on a 13" screen, but when displayed on a bigger iMac screen it's completely off. Is there a way to format the width so it automatically adjusts?

@creedon great thank you. Same for the buttons?

Hi there, I have a similar issue! My URL is www.alexiademicheli.com - I designed the site on my 13" Mac, but when looking at it on my iMac it looks horrid. Which codes can I use to limit max width on bigger screens (iMac) and smaller screens (phone)? Thank you!

That worked for H1, H2 and H3 thank you! I think there might be an issue with H4 though - I've tried formatting the code as per the one you sent but it didn't work. Haven't added url for H4 font as it is one from Squarespace. Here are the codes I use:

@font-face {

    font-family: 'September Spirit' !important;

       src: url('https://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef08f14faa3c7588a3eb85/1693386993242/September+Spirit.otf');

  }

h3 {font-family: 'September Spirit' !important;}
h4 {font-family: 'Acumin Pro Medium' !important;}

Also have an issue with the buttons using H1/ H2 with these codes:

// Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'CarefreeSerif-Regular' !important;
}

// Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'CarefreeSerif-Regular' !important;
}

Thanks so much for your help!

Hi there,

I have the same issues and it's driving me insane. URL is www.alexiademicheli.com

Here's screenshots to illustrate what I mean; on the left is the correct custom font as it appears on my laptop, and on the right the wrong font as it appears on my iMac.

Here's the custom CSS I've used;

 

@font-face {
    font-family: 'CarefreeSerif-Light' !important;
    src: url('FontURLhttps://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef06c2f241061ffc8834f3/1693386434272/CarefreeSerif-Light.otf');
  }

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

// Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'CarefreeSerif-Regular' !important;
}

// Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'CarefreeSerif-Regular' !important;
}

// Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: 'Acumin Pro SemiBold' !important;
}

@font-face {
    font-family: 'September Spirit' !important;
    src: url('https://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef08f14faa3c7588a3eb85/1693386993242/September+Spirit.otf');
  }

h3 {font-family: 'September Spirit' !important;}
h4 {font-family: 'Acumin Pro Medium' !important;}

.Marquee * {
   font-family: 'September Spirit' !important;
  color: solid black !important;
  size: 50pt !important}

Let me know if I can clarify anything else! 

It's www.alexiademicheli.com. Thank you!

Hi there, I'm having issues inverting my logo's colour on specific sections rather than pages. I've tried this code:

.dark, .dark-bold, .black, .black-bold {
&.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);}}

Also tried inserting the new logo's image link instead of filter in the formula above, but it changes the logo on the whole page using dark or black as a first section. 

Ideally, I'd like the logo to switch effortlessly between black and white as I scroll through the page, depending on each sections. Does anyone know how to do this? X