How To Use Multiple Fonts in One Line // Squarespace CSS Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here πŸ‘‰ https://insidethesquare.co/learn
β€”
πŸ₯³ Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
β€”
πŸ’• Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
β€”
This week’s tutorial is a combination of CSS and HTML, that will make it possible to display more than one font in a single line of text! There are three steps to follow here:

**Step 1** 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 2** 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. Pay close attention to the video around the 1:50 mark 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 3** The final step is to use HTML to change the style of a font to the new one you just installed. YouTube is tricking about using angle brackets in its descriptions so head on over to my blog at insidethesquare.co/squarespace-tutorials/multiple-fonts to grab this code.

**Bonus Step 4** Let me know what you think of this tutorial! Did you use it on your site? Share a link in the comments below!
β€”
🀩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy πŸ‘‰ https://InsideTheSquare.co/css
β€”
πŸ₯³ Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
β€”
πŸ™‹ Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
β€”
The term β€œSquarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform β™₯
β€”
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

You May Also Like