Miller Template Help - CSS code to customize Mobile Header Title Branding typeface

Site URL: https://hellobrittm.com

Hello! 

I'm looking to customize the mobile header branding / site title typeface for the Miller Template. I was successful to do this for the desktop view but it's not syncing for mobile. I appreciate any help to sort this out or note my input flaw(s)—thanks! 

Code used to update website (worked, yay!)

@font-face {

    font-family: 'SyneExtra';

       src: url('https://static1.squarespace.com/static/533d5f26e4b02cbd82cf2d9e/t/5f5a6f9341e69105cc2f272a/1599762323443/Syne-ExtraBold.otf');

  }

h1 {font-family: 'SyneExtra';}
.has-site-title .Header-branding { font-family: "SyneExtra"; }

Code attempt to update mobile (doesn't work for me, boo.)

@media screen and (max-width:960px) {

    font-family: 'SyneExtra';

       src: url('https://static1.squarespace.com/static/533d5f26e4b02cbd82cf2d9e/t/5f5a6f9341e69105cc2f272a/1599762323443/Syne-ExtraBold.otf');

  }
.mobile-site-title .header-branding { font-family: "SyneExtra"; }

Mobile uses this

a.Mobile-bar-branding {
    font-family: 'SyneExtra' !important;
}

Great!  This worked. Thank you so much!