Jump to content

Adding custom font to Wells template cover page and tagline

Recommended Posts

Site URL: https://danielkobin.com/

Hi there,

I was able to load a custom font (Hanson) as H3 but am having issues getting it onto my cover page of my website (Wells template). If that's not possible via CSS custom code, I was then hoping there would be a way to change the logo positioning of the cover page from top of the page to dead center of the page. 

I'm trying to do either of the following.
1. Load a custom font (outside of the standard SS fonts) and make that the font of the Cover Page HEADLINE text. (I was able to load the custom font in CSS, but am not sure of a code fix to change the cover page headline).
Or
2. Move the Branding Logo/Text to the center of the screen (see attached example with the "Test" text). Currently with this cover page option, I can only place it top center.

I want to stick with this cover page template, so please let me know if anyone know of any solutions.

Thanks!

Screen Shot 2020-03-30 at 8.57.45 AM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

0. With h3, wrap your code in style tag and add to Cover Page Settings > Advanced > Header

<style>

your code

</style>

1. Add to Cover Page Header

<style>
h1#sqs-slash-page-header {
    font-family: tuan !important;
}
</style>

2. Loading slowlyyyyyyy

 

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

Thanks for the feedback! It looks like adding this code to the Cover Page Settings > Advanced > Header code section worked, however I'm only seeing the custom Hanson font on desktop (tested on Chrome and Safari).

But on mobile (iOS) it's showing a default typeface rather than the Hanson one. Do you know if that can be fixed through the code? 
Thanks!

Screen Shot 2020-04-03 at 9.37.57 AM.png

IMG_76890287379A-1.jpeg

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.