Jump to content

Custom "Header Branding" font appearing on desktop, but not on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Posted

Hi, 

I am new to using Custom CSS but it looks like I've figured out everything except for 2 spots that are messing up. 

On the desktop site, my "header: branding" is using the font I've customized, but when I go on mobile, it's the wrong font. 

This is the code I am using:

a.Header-branding  {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

Attaching below! Any advice?

Screenshot 2024-05-16 at 2.31.28 PM.png

IMG_7994.jpg

Posted

For setting header on mobile, you can try the following custom CSS

.has-site-title .Mobile-bar-branding {
  font-family: 'SUNBLUM';
}

My testing

Let me know how it works on your site

image.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted

AH THAT WORKED! Thank you!

I have another spot that isn't working, are you able to help with that as well? I recently added a Shop page and it looks like the Product Title font is picking up the CSS that I added for H3. Obviously having this huge of a font looks silly, so I'd rather use Futura instead of the custom font I added. Any ideas? This is what I have in my custom CSS:

//--- Your Custom Font ---//
@font-face{ 
font-family: 'SUNBLUM';
src:
url('https://static1.squarespace.com/static/5c36a1b2ee1759c4fe90a6a6/t/66462ea7095da3406b287b3e/1715875495351/SGSunblum-Regular.otf') format('opentype'),
url('https://static1.squarespace.com/static/5c36a1b2ee1759c4fe90a6a6/t/66462e76dca00e0410ff7de8/1715875446129/font.woff') format('woff'),
url('https://static1.squarespace.com/static/5c36a1b2ee1759c4fe90a6a6/t/66462ea28fd2947e6ddba844/1715875490320/font.woff2') format('woff2');
font-weight: 400;}

body:not(.image-block-poster-dynamic-font-sizing) .sqs-block-image .design-layout-poster .image-title p {
font-family: 'SUNBLUM'!important;
font-size: 60px !important;
color: #ffffff !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
letter-spacing: .0em !important;}

h1 {font-family: 'SUNBLUM' !important; 
font-size: 70px !important;
color: #000000 !important;
line-height: .9 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

h2 {font-family: 'FUTURA' !important; 
font-size: 25px !important;
color: #000000 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

h3 {font-family: 'FUTURA' !important; 
font-size: 30px !important;
color: #000000 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

a.Header-branding  {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

.has-site-title .Mobile-bar-branding  {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

.empty-message {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

Thank you!!

Screenshot 2024-05-17 at 12.35.01 PM.png

  • Solution
Posted
On 5/17/2024 at 11:38 PM, drinksbyevie said:

AH THAT WORKED! Thank you!

I have another spot that isn't working, are you able to help with that as well? I recently added a Shop page and it looks like the Product Title font is picking up the CSS that I added for H3. Obviously having this huge of a font looks silly, so I'd rather use Futura instead of the custom font I added. Any ideas? This is what I have in my custom CSS:

//--- Your Custom Font ---//
@font-face{ 
font-family: 'SUNBLUM';
src:
url('https://static1.squarespace.com/static/5c36a1b2ee1759c4fe90a6a6/t/66462ea7095da3406b287b3e/1715875495351/SGSunblum-Regular.otf') format('opentype'),
url('https://static1.squarespace.com/static/5c36a1b2ee1759c4fe90a6a6/t/66462e76dca00e0410ff7de8/1715875446129/font.woff') format('woff'),
url('https://static1.squarespace.com/static/5c36a1b2ee1759c4fe90a6a6/t/66462ea28fd2947e6ddba844/1715875490320/font.woff2') format('woff2');
font-weight: 400;}

body:not(.image-block-poster-dynamic-font-sizing) .sqs-block-image .design-layout-poster .image-title p {
font-family: 'SUNBLUM'!important;
font-size: 60px !important;
color: #ffffff !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
letter-spacing: .0em !important;}

h1 {font-family: 'SUNBLUM' !important; 
font-size: 70px !important;
color: #000000 !important;
line-height: .9 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

h2 {font-family: 'FUTURA' !important; 
font-size: 25px !important;
color: #000000 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

h3 {font-family: 'FUTURA' !important; 
font-size: 30px !important;
color: #000000 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

a.Header-branding  {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

.has-site-title .Mobile-bar-branding  {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

.empty-message {font-family: 'SUNBLUM' !important; 
font-size: 80px !important;
color: #000000 !important;
display: flex;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -.04em !important;}

Thank you!!

Screenshot 2024-05-17 at 12.35.01 PM.png

Change this

font-family: 'FUTURA' !important; 

to this

font-family: futura-pt !important;

 

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!)

Create an account or sign in to comment

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

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