How To Combine Font Styles Using Code

With a clever combination of CSS and HTML, this tutorial will show you the three steps to take so you can use more than one font in a single line on your Squarespace site. And before you ask, yup, this DOES work with any text style, headings and paragraph alike. Pretty cool right?!

Anywho, steps are below, and if you are more of a visual learner, I made a video that you can follow along when you try this on your own site.


 
 

STEP ONE

Install your font file on your Squarespace site. Use an OTF or TTF font file, and upload it by navigating to design - custom css - manage custom files. Here you can just drag and drop it into your files to upload it.

STEP TWO

Name that file using Custom CSS. Right above where you uploaded the file, you can add this code to name what you just installed. The only parts you need to change are the font name and the url placeholder text. If you arent sure how to get the URL, pay close attention to the video around the 1:50 mark on my video of this tutorial to follow along. Here is the code snippet you can edit:

@font-face { font-family: change-this-to-the-font-name; src: url(filler-text-use-your-own-url-here)}

STEP THREE

The final step is to use HTML to change the style of a font to the new one you just installed. You can use this for any text type, headings or paragraph, but the style bracket in your HTML code will overwrite you standard font. Here is an example using an H2 style:

<h2> main text in regular font <span style= "font-family: font-name"> fancy new font </span> back to old style </h2>

And that’s it!

Three steps and your site is a little more stylish :) This tutorial was actually requested by one of my fans, and now I want to hear from you! If you have a tutorial you want to see, you can submit a tutorial request right here on my website: