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

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?

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

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