This tutorial has been updated for 2023 There was a major URL change that prevents some Google fonts from being used! FOLLOW THE STEPS BELOW to import the correct font file - part of this video is outdated.
In your Site Style menu, you have access to the entire Google Font database. So why would you need to install it on your Squarespace site? If you want to use a Google font on something that you can't edit directly in the site styles menu, like an accordion block title a summary block description, or a list section button.
For that, you’ll need to add the Google font to custom CSS, and that’s exactly what you’ll learn how to do in this tutorial.
For more info, visit the original blog post: insidethesquare.co/squarespac...
Here are the UPDATES steps for 2023:
1. Visit fonts.google.com to select a font you want to use.
2. Select your bag/cart icon to see the font family you have selected
3. On the Web options, choose the "@import" toggle
4. Copy the code for this font
5. Open the Squarespace editor
6. Navigate to website → website tools → custom css
7. Paste the code here
8. Remove the style brackets, including the carrots, so your code will start with @import
9. Remove the 2 in the url for CSS2
10. Please note - most of the fonts in the Google font database will work, but some of the latest have not been updated and will not work with this method. if your font doesn’t load using only CSS, you’ll need to install the font following these instructions: developers.google.com/fonts/docs/css2
11. Copy the font family name from Google
12. Using the selector or block id & asterisk, assign the font to a specific item in Squarespace by using it’s font name
13. Use additional text & font properties to change the style of the font you’ve uploaded to your Squarespace site
14. Save your custom css when you’re done!
Links to Related Content:
📄 Squarespace CSS Selectors: insidethesquare.co/css
⭐ Free Training: Squarespace CSS Basics: insidethesquare.co/learn
⚙️ Chrome extension for the block id (not affiliated, just a fan!): insidethesquare.co/chromeext
🔗 How to install CSS in one page on your Squarespace site: insidethesquare.co/singlepage
🔡 Free Guide: Font & Text Properties: insidethesquare.co/textguide
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ buymeacoffee.com/insidethesquare
- - -
📑 Get access to my collection of CSS codes for Squarespace at insidethesquare.co/css
- - -
⭐ NEW: List of my top 7 FREE Squarespace tutorials: insidethesquare.co/top7
- - -
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
- - -
💻 WEBSITE → insidethesquare.co
📧 NEWSLETTER → insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → insidethesquare.co/inside10
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
16 окт 2023
