How to make one word a custom font on your Squarespace website
A beautiful way to put emphasis on one specific word, or to add a completely custom feel to your Squarespace site is to use this CSS snippet to make one word a custom font on your Squarespace website (and any other text styling you like!) to just one in any given title or paragraph.
It might sound a little complicated, but it’s actually a mega simple plugin.
You can easily copy and paste it into the CSS panel in your Squarespace site and then customize to your hearts content!
Oh and there’s a great resource for finding gorgeous (inexpensive) custom fonts in this post too!
So let’s get started…
Pst… Links with a * are affiliate links, meaning I get a little kick back if you choose to use them. I only promote tools & services I use and love myself & always will do!
Choosing Great Fonts for your website
Before we jump into the code - if you need a little help choosing the right fonts for your website - make sure to read this post first, then hop back here for the plugin!
How to Add your custom Font to your Squarespace website
Simply head over to the CSS panel
Design > CSS
Then scroll on down to the bottom and click “manage custom files” and upload your font files.
Reference and name your custom font in your CSS panel
@font-face {
font-family: 'font-name';
src: url('font-url');
}How To add the font name
In the space that says ‘font-name’ this is where you can write whatever you want to name this font (usually best to give it the actual name, but if you prefer something shorter or easier to remember that’s cool. Just remember it will need to be written in exactly the same way whenever you use it, so make a note of it. Oh & pro-tip - keep it all lower case.
How To add the font url
Between the single quotation marks delete font-url (leaving the single quotation marks where they are, and leaving your cursor between them, scroll down to the font file you saved and click on it. The url path to this font file should appear between the single quotation marks. Don’t click it multiple times as you’ll end up with the url being added multiple times too!!
Types of font files you can use to add a custom font on Squarespace
The best font files to add a custom font on Squarespace are woff and tff files, but the very very best is to add a range of files - including woff, woff2 tff and otf to cover all your bases! You can use this code snippet to add all of these different file types (follow the same steps as above, just make sure to upload one file for each file type and add the right url to the right snippet.
////CUSTOM FONTS////
@font-face {
font-family: 'font-name';
src: url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.otf') format('opentype'),
url('webfont.ttf') format('truetype');
}
Where to find great custom fonts for Squarespace (that don’t cost the earth!)
Creative Market* is my go-to source of fab, unusual fonts that are totally affordable. They often have sales, and some of their font-packs are full of loads of awesome options!
Just one word of warning - make sure to check the licenses first and never use a font you don’t have a license for!
So now you’ve added your custom font to your Squarespace site, let’s apply it to just one word, like this example of a custom website I created for Tina at Earth Tribe Yoga!
Is adding the lovely touch of a custom font one of the final touches to your site before you launch?
Make sure to grab my launch checklist so you can press publish with confidence (and pop that champagne without worrying you missed something along the way!!)
How to apply a font family to just one word
Now you’ve added your custom font and named it in your CSS panel it’s time to apply this font family to a specific font style so that when you style a word in one of your sentences in this way it automatically uses the font family you’ve set.
Still in your CSS panel, add a couple of line spaces and then copy and paste this code snippet
em {
font-family: 'font-name';
font-weight: 200;
font-style: normal;
font-size: 4rem;
line-height: 1rem;
}Now here’s the clever bit! Let me walk you through what each stage of this CSS snippet to add a custom font to one specific word is doing…
em - this means that this styling will apply to any text in italics on your website (em is short for emphasis and means italics).
If you wanted to apply your custom font to a particular header (for example header 1 but not header 2, 3 and 4 you could replace h1 with h1 em, or h2 em or h3 em or h4 em - you get the picture!
If you wanted to apply your custom font to all paragraph text it’s the same deal - except you’d use the following…
p em
And finally if you wanted to apply your custom font to paragraph one, paragraph two or paragraph three specifically you’d use
Paragraph 1 - .sqsrte-large em
Paragraph 2 - p
Paragraph 3 - .sqsrte-small em
font-family - this is where you will replace ‘font-name’ with what you called your custom font in part 1
font-weight - this is how think/ bold you’d like your font to be. Not all fonts come in all weights, so if you choose a number that doesn’t work for your font then Squarespace will automatically select the font weight that is closest
font-style - we’re going to be applying our custom font to a single word by setting that word to italics. Thing is, we may not want the word in the custom font to appear in italics, so by choosing font-style: normal we’re telling Squarespace to display the word in “normal'“ style i.e. not in italics
font-size - this is (shock!) what size you want your words in the custom font to be. What’s rem? rem is a responsive font size which means that depending on the screen size where the font is viewed the font will be larger or smaller (which is how the other words on your site work so this is a good shout!) as opposed to pixels which are an absolute size & will mean the word is the same size regardless on whether we’re viewing on mobile or desktop etc. So using rem is better. You may have to play around with this number to get the right size that works with the other words in your sentence.
line-height - this is how much spacing there is above and below the word (ie how high the line is) this again is something you may need to play around with to get the right look. Once again rem is responsive and so a good measurement to use for this.
To make your life easier I’ve created a code snippet that has the CSS applied to all font types on your site - simply delete out the ones you don’t want (oh and make sure to switch out the font-family name and any other styling as required!
Oh and if you want to style certain headers/ paragraph fonts differently (very likely for font size especially!) just copy and paste the whole code snippet, remove the headers/ paragraphs you don’t need and tweak to fit, then rinse and repeat for each different type of text.
h1, h2, h3, h4,
.sqsrte-large,
.sqsrte-small,
p {
em {
font-family: 'font-name';
font-weight: 200;
font-style: normal;
font-size: 4rem;
line-height: 1rem;
}
}How to apply a custom font to just one word in Squarespace - the final step!
The final step to applying your custom font to a specific word is simply to highlight that word and click the ‘I’ to make it italics (you can also highlight the text and click command - i on a mac, or ctrl i on a pc) and your text should immediately change to your new custom font!
Less of a DIYer and want someone to do it for you?
You can grab a power hour with me where I can add and style a custom font on your site, and any number of other bits n bobs that have been on your to-do list for a while!
