How to make one word a custom font on your Squarespace website
Ever wondered how to make words really stand out on your website? In this tutorial, I’ll show you how to recreate this cool typography effect to highlight single words and add some personality to your typography!
Step 1. Add your custom fonts to the CSS editor.
Go to Design > Custom CSS and click the button "Manage custom files". Then click "Add images or fonts" to upload your custom font.
*If you're using adobe fonts then please follow their instructions to add your stylesheet code instead.
Step 2. Add the first part of the code to the CSS panel.
font-family: 'font name goes here';
src: url('font url goes here');
}
What it means:
font-family - this is the name that you are going to give the font, make sure to use the same spelling in the second part of the code.
src: url - To get the font url, click on font file that you uploading in the previous slide, this will show you the URL.
Step 3. Add the second part of the code to the CSS panel.
font-family: 'font name goes here';
font-weight: 400;
font-style: normal;
font-size: 4rem;
line-height: 1rem;
@media screen and (max-width: 767px){
font-size: 2.6rem;
}
}
What it all means:
em = targets all italic fonts
font-family = the name of your font
font-weight: the thickness of the font
font-size: you guessed it! The size of your font - yours will probably be a lot smaller than this example. The second font-size allows us to choose a smaller font size on mobile screens.
line-height: the line height of the font.
Step 4 (optional!)
em {
font-family: 'font name goes here';
font-weight: 400;
font-style: normal;
font-size: 6rem;
line-height: 1rem;
}
}
What it means
If you only want the code to work on headings, swap the previous slides code for this instead.
Wrapping the code with "h1,h2,h3,h4" means that it will only work on headings and not paragraphs.
Step 4. Time to activate the code!
The text will now change to your custom font when you select the italic setting in the Squarespace editor!
Hi I’m Danielle
I help entrepreneurs & creatives to bring their brand online through beautiful, strategic web design. Click below to learn more about how I can help you to launch your dream website.
