Custom Font Only Displays on My Browser

Site URL: http://adamachase.com

Hi, I've seen several people ask this question in the last year and no public answers displayed. I downloaded a font called fava and used this code in custom CSS:

//----------FONTS----------//

@font-face {font-family: 'Fava'; src: url('black.ttfhttps://static1.squarespace.com/static/5fd65baefd756c1ce4d9f82c/t/5fd7d00d8720482d7181d037/1607979024266/Fava-black.ttf');}

h8 {
  font-family: 'Fava';
  font-size: 50px;    
  font-weight: bold;  
  font-style: italic;
  color: inherit;
  line-height: 2.5em;
}

Display is fine on my computer where I am working on the website, but on my other desktop and mobile device, the font has turned into a default font that is not the one I am using. The incorrect font is however showing up in italics and responding to the font- weight command. 

Site url is https://adamachase.com

Password: aac427

Font face code is invalid. Use this font face code

@font-face {
  font-family: 'Fava'; 
  src: url('https://static1.squarespace.com/static/5fd65baefd756c1ce4d9f82c/t/5fd7d00d8720482d7181d037/1607979024266/Fava-black.ttf');
}