3 Step Process on How to Insert Custom Font into Your Squarespace

3 Step Process on How to Insert Your Custom Font into Squarespace Website

Step #1 - Download Your Font

• If you don’t have your own font you can buy or download it for free, here are some most popular free and paid font websites:

  • Free Font Websites:

    • Google Fonts (fonts.google.com) – Huge library of free, open-source fonts for web and print.

    • DaFont (dafont.com) – A massive collection of free fonts, including many decorative and display typefaces.

    • Font Squirrel (fontsquirrel.com) – High-quality, legally free fonts for commercial use.

    • 1001 Fonts (1001fonts.com) – Free fonts with a wide variety of styles and themes.

    • Befonts (befonts.com) – Trendy free fonts with a modern aesthetic.

  • Paid Font Websites:

    • MyFonts (myfonts.com) – One of the largest marketplaces for premium fonts.

    • Creative Market (creativemarket.com) – Handcrafted fonts from independent designers.

    • Fontspring (fontspring.com) – High-quality professional fonts with flexible licensing.

    • YouWorkForThem (youworkforthem.com) – Unique and artistic premium fonts.

    • Hoefler & Co. (typography.com) – High-end, beautifully crafted typefaces (formerly H&FJ).

Step #2 - Upload Your Font to Squarespace

• If your font was downloaded in zip folder open it

• You have to get .tff folder after opening:

• After you opened it go to your Squarespace websites Custum CSS section (here is how to access it).

• After access, you have to press Custom files and drag and drop .ttf file

View fullsize

• Drag and drop your .ttf folder

Step #3 - Insert Font and Code into Website

• Insert this code in the Custom CSS
  
  @font-face {

  font-family: 'name of your font';

  src: url(-);

  }
  

• Type the name of your font in font family (name does not matter
  you can type anything)

• Then in “url (-)” delete the slash any click on the font you uploaded in dropdown menu, you have to get something like this:

• Then you have to insert this code for the font types you want to change e.g. (H1,H2,p1,p2 etc.)
  
  If you want to change H1:
  
  h1 {

  font-family: 'name of your font';

  }
  
  If you want to change H2:
  

  h2 {

  font-family: 'name of your font';

  }
  
  etc.
  
  you can do the same thing for h3, h4, p1, p2, p3, p4 too

• Then, instead of name of your font you have to write the name of the font you previously assigned

• after that all the Fonts had to change.

ALL DONE!