@font-face font not displaying on Lock screen

Site URL: https://blenny-pike-rkww.squarespace.com/

I've uploaded a custom font via @font-face in the 'Custom CSS' panel. It works nicely across the site, but not on the 'Lock screen' (I'm using the Lock screen to password protect my website).

Any ideas why it doesn't display on Lock screen and what I should add to the Custom CSS to make that happen?

I used the following CSS:

*{
  font-family:'apercu-mono-regular-pro' !important;
}

Go to Home > Settings > Advanced > Code Injection > Scroll down to Lock Page Box

and add this code

<style>
  @font-face {
  	font-family: tuanphan;
    src: url(paste font file url here);
  }
  * {
  	font-family: tuanphan !important
  }
</style>

Hi @tuanphan -  thank you so much for your quick answer!

I am on a Personal plan, however, it seems Code Injection is only available on Business or Commerce plans.

Is there a workaround within the Personal plan?

17 minutes ago, mar932847 said:

Hi @tuanphan -  thank you so much for your quick answer!

I am on a Personal plan, however, it seems Code Injection is only available on Business or Commerce plans.

Is there a workaround within the Personal plan?

I'm not sure. I haven't tried using CSS for Lock Screen on Personal Plan. You can contact Squarespace Customer Care to ask this.

https://support.squarespace.com/hc/requests/new#choose-topic

On 4/27/2020 at 8:54 AM, tuanphan said:

Go to Home > Settings > Advanced > Code Injection > Scroll down to Lock Page Box

and add this code

<style>
  @font-face {
  	font-family: tuanphan;
    src: url(paste font file url here);
  }
  * {
  	font-family: tuanphan !important
  }
</style>

 

@tuanphan Is there a way to apply this code injection to only one line of text and not ALL the text on the Lock Screen? If you look at debbiemarkswellness.com I want to apply this to ONLY the middle line of text, "Wellness is on the way..." which in Squarespace calls Headline. I can do this in preview, but can't figure out what the element is called and how to write the code in the Lock Screen injector. 

On 4/27/2020 at 8:54 PM, tuanphan said:

Go to Home > Settings > Advanced > Code Injection > Scroll down to Lock Page Box

and add this code

<style>
  @font-face {
  	font-family: tuanphan;
    src: url(paste font file url here);
  }
  * {
  	font-family: tuanphan !important
  }
</style>

 

Hi @tuanphan! Thanks for this! It works! My only problem is that it doesn't change the fonts on mobile? 😞

Here's my link: puhonkeepsakes.com

Here's the code I used:

<style>
@font-face {
font-family: 'La Luxes Serif';
src: url(https://static1.squarespace.com/static/5f86bc9bc984507dcfa78455/t/5f86d5b537bce9017e6d991f/1602672054106/La+Luxes+Serif.ttf),
url(https://static1.squarespace.com/static/5f86bc9bc984507dcfa78455/t/5f86d5bc5253a74bf8846f55/1602672060446/LaLuxesSerif.woff),
url(https://static1.squarespace.com/static/5f86bc9bc984507dcfa78455/t/5f86d5bf7023803e0f9c7c5c/1602672063317/LaLuxesSerif.woff2),
}
  * {
  	font-family: 'La Luxes Serif' !important
  }
</style>

<style>
  @font-face {
  font-family: 'La Luxes Serif';
  src: url('https://static1.squarespace.com/static/5f86bc9bc984507dcfa78455/t/5f86d5bf7023803e0f9c7c5c/1602672063317/LaLuxesSerif.woff2') format('woff2'), /* Super Modern Browsers */
  url('https://static1.squarespace.com/static/5f86bc9bc984507dcfa78455/t/5f86d5bc5253a74bf8846f55/1602672060446/LaLuxesSerif.woff') format('woff'), /* Pretty Modern Browsers */
   url('https://static1.squarespace.com/static/5f86bc9bc984507dcfa78455/t/5f86d5b537bce9017e6d991f/1602672054106/La+Luxes+Serif.ttf')  format('truetype'); /* Safari, Android, iOS */
}
  * {
  	font-family: 'La Luxes Serif' !important
  }
</style>