Mobile Header font: Brine

Hello,

I would like to code a custom font into the header of the mobile view of my website. I have done so successfully for the regular view but it defaults into standard font when i switch to mobile view. Any ideas? This is what I have for the desktop version and it works great:

@font-face {
  font-family: 'retro_computer_personal_use';
  src: url(https://static1.squarespace.com/static/5c253509f8370a48f3940027/t/5e16848141d1895d960adb21/1578534017904/retro_computer_personal_use.ttf), 
}
.Header-branding {
  font-family: retro_computer_personal_use, sans-serif !important;
}

a.Mobile-bar-branding {
    font-family: 'retro_computer_personal_use';
}

It worked! Thank you so much!!