I'm new to Zoho Sites, I've been working on a web for a couple of days and I just can't get right how to add and use custom fonts.

So here's the situation:

-I upload my font (i tried this with ttf and otf types) to the files folder.

-I click on Themes>Custom CSS Editor and write this exact sentence:

@font  -face   { 
      font-family  :   firstFont  ; 
      src  :   url  (files  /pixelart.t  tf  )  ; 
   
}

-I save and close and again, click on Themes>HTML/CSS Editor and scroll to h1 class, then replace the first font name with mine.

h1   { 
font-family  :  $BodyH1FontFamily  [  'firstFont'  ,   Georgia  ,   "Times New Roman"  ,   Times  ,  serif  ]  ; 
font-size  :  $BodyH1FontSize  [  30px  ]  ; 
color  :  $BodyH1TextColor  [  #000000  ]  ; 
}

-I save and close and the texts formatted as Header 1 displays Georgia font. I can only assume it's not finding to font file and it just jumps to the next in line.

...What am i missing? Do i have to summon the Custom CSS from the stardard CSS or the HTML in any way? Like with a ref or something? Am i supposed to see my new font in the font gallery or in the dropdown menu when editing an object on the editor?

Thanks in advance for your help and for the great site builder you offer :D

Cheers!