#askAshleigh - How to Install Custom Fonts in Squarespace

Got a nifty little font that you downloaded and want to upload it into your Squarespace website? You’re going to have to install it, but it’s painless I promise. All you’ll need is the font files (duh) and some code.

#squarespace #font #fonts #webdesign #femininefonts #scriptfonts #howtochoosefonts

Ok, so you’ve got your font downloaded onto your computer right? Great. That font zip file should come with either a .ttf or .otf file.

 

Here’s the difference between the two:

TrueType (.ttf)

Truetype were created back in the 80’s by Microsoft and Apple. They wanted a font that could work for both Macs and PC’s while working well with printers. TrueType was born and served it’s purpose very well and still does today.

 

OpenType (.otf)

OpenType was created by Adobe and Microsoft as way to expand the traditional character settings of TrueType fonts. Yes, the alphabet and the number system have limited characters, but typesetters and designers were including ligatures, glyphs, swooshes, etc in their fonts and TrueType wasn’t giving the support that people needed.

 

So what does that mean for you?

OpenType fonts have the capability to hold more characters (if your font comes with them) for you to use on your website.
 

Always keep your OpenType font files! 

Step one:

Ok so now that you have your file, go into your Squarespace site and head to the Design panel. Once you’re there go to custom CSS, and upload your font files onto your website:

 

Capture.PNG

 

Step two:

Let’s take a look at the code that you’ll need:

 

@font-face {

font-family: 'FONT NAME';

src: url('FONT GOES HERE');}

 

Here’s the breakdown:

@font-face: this is the CSS rule that tells your site “Hey Girl! We wanna use a custom font so pay attention!”

Font-family: the font family name is the regular name that you and I know call the font. Think of Arial. That is a font family. When writing CSS you’d write it like this:

font-family: ‘arial’;
Src: url: Inside of the parenthesis and the single quotes is where you will put in the file link for the font that you uploaded into Squarespace. Squarespace has already generated that link for you and I’ll show you how to get it in a bit.

Remember: always close your CSS rules with a semi-colon (;)

Now to install the font onto your website, paste this code in first:

@font-face {

font-family: 'FONT NAME';

src: url('FONT GOES HERE');}

 

Then update it with the information that relates to your font.

For example:

@font-face {

font-family: 'Dakota';

src: url('/static.squarespace.blahblahblah/Dakota.otf');}

I uploaded a font named Dakota (that’s the name of my puppy :)). Here’s how the code would look when I update it:
 

Press save and you’re done!

 

Step three:

Here’s how you use your font:

So typically in Squarespace you would select your fonts through the style editor, but not this time. Since you’re fancy and want a custom font, you’re going to have to write some more code to be able to see the font on your website. Look at you! A little mini programmer!

First, decide on when do you want the font to be used. Do you want it to be your first heading font? Second? Do you want to use this font for links only? Or do you want your body content to use this font?

Here are the CSS rules you’ll need to successfully use these fonts:

H1: heading one

H2: heading two

H3: heading three

A: Hyperlinks

P: paragraph (or body) text

 

Go back into your Custom CSS page and right underneath where you installed the font, add in some code for your new font:

For example:

@font-face {

font-family: 'Dakota';

src: url('/static.squarespace.blahblahblah/Dakota.otf');}

H1{

font-family:’Dakota’;

Font-size: 31px;

Color: #898989;}

and that's it! you're all ready to use those fancy new fonts on your squarespace site.