Using the CSS Editor to Add A Custom H1 Font

Site URL: https://simplyeventsinc.com/

Currently we are using images as our "H1" on each page because we want to use a branded font. This is definitely not ideal for SEO purposes, so I am trying to upload our custom font to the squarespace site via the css editor in order to assign it as our H1 font. I uploaded both a ttf file as well as a woff file and wrote the code to assign it to font-face and font family. However, while I have all of the code correct, it is not displaying the font correctly. I know the code is working because I can manipulate other portions of the H1 like font size and color, but for some reason the font itself is not displaying. When I assign it to the H1, it just makes the current font bold, but doesn't change it to the correct font style. Anyone have any troubleshooting ideas?

You're going to need to use a @font-face CSS element at the top of your code to point to the where your font file is. It would look something like this:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Edit: Hmm... on second thought - you might need to provide us the code you used for the @font-face so we can see what the problem might be.

@ChromaticZero Here is the code used:

Looks like the TTF is not a valid font file. I'm not sure, but it seems to me your file name for it might be invalid. Remove the '+(3)' from the filename, reupload it, adjust your code, and try again.