Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

@font-face font not displaying on Lock screen


mar932847

Question

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

6 answers to this question

Recommended Posts

  • 1

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Edited by bellewarren
Link to comment
  • 0
<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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...