Add custom font to body text on Lock Screen

Hi there,

I have looked through the posts on customising the Lock Screen without any luck so hoping someone can help me here.

I am trying to add a custom font to the body text to match the serif font on the rest of the site. I would also like to left-align the block if possible. 

Additionally, if there's any way to add a 'Return to home / Go Back' button or link under the password box, this would be great.

https://caterpillar-wrasse-ns3s.squarespace.com/

Password: psa23

The codes I've found on other posts have not been working for me, hoping someone might know how to sort this or see what I'm doing wrong?

Thanks,

Abigail

You can't customize the lockscreen beyond the limited tools available, you can't add Custom CSS or code injection. Best thing you can do is change the font to one that is close enough to the one you are using on the website.

Really, that's a shame! But thanks a lot for your reply 🙂

7 minutes ago, abigailallen said:

Really, that's a shame! But thanks a lot for your reply 🙂

No problem!

@abigailallen You mean add a Go back link like this?

Demo: https://tuanphan.squarespace.com/?noredirect

@tuanphan thanks, this is the function I need, however, can you place the link below 'Password'?

On 9/4/2023 at 4:49 PM, abigailallen said:

@tuanphan thanks, this is the function I need, however, can you place the link below 'Password'?

Yes. You can adjust its position.

Add to Website > Website Tools > Code Injection > Lock Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('<a class="lock-button" href="https://google.com">Go back to Google</a>').insertAfter('.password-form');
})
</script>
<style>
  a.lock-button {
  	background-color: black;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    position: relative;
    top: 100px;
  }
</style>