Macron (ā) not appearing on website

Hi, 

I was hoping someone could help me.

I have set a custom font in the CSS panel but for some reason, the macrons are not showing correctly. What can I do to get this to work? 

My code is:

@font-face {font-family: 'OUTFIT';
src: url('https://static1.squarespace.com/static/6600b070d2dabb1e03b392c3/t/660b7d0b45f24c77246a5662/1712028939578/Outfit%5Bwght%5D.woff');}

h1 {font-family: 'OUTFIT';}
h2 {font-family: 'OUTFIT';}
h3 {font-family: 'OUTFIT';}
h4 {font-family: 'OUTFIT';}

p1 {font-family: 'OUTFIT';}
p2 {font-family: 'OUTFIT';}
p3 {font-family: 'OUTFIT';}

Sorry, i'm a complete novice when it comes to using CSS...

Thanks
Scott