Jump to content

@font-face font not displaying on Lock screen

Recommended Posts

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

Link to comment
  • Replies 6
  • Created
  • Last Reply

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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. 

Screen Shot 2020-08-18 at 5.16.59 PM.png

Screen Shot 2020-08-18 at 4.26.36 PM.png

Screen Shot 2020-08-18 at 5.20.16 PM.png

Link to comment
  • 1 month later...
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>

 

Link to comment
<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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.