Jump to content

Using the CSS Editor to Add A Custom H1 Font

Recommended Posts

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?

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

Edited by ChromaticZero
Re-read the question and expanded my answer.
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.