Add a custom font is one of the easiest ways to upgrade your Squarespace website beyond its template. In this article, we’ll show you how to add one directly into an image card in Squarespace.
Log into your Adobe fonts account to obtain your project ID – this unique string of letters and numbers that identifies your project.
Background Color
Squarespace 7.1 introduced a feature to enable text in blocks to have an accent color as part of their background, adding visual emphasis without needing coding knowledge. Taking advantage of this new capability requires no programming knowledge whatsoever!
To use this feature, select a block type with text and click its pencil icon to open its design menu. Next, toggle the Bring to Front setting; this enables a range of highlight styles – whether from your site palette colors or custom hues – as well as the option for front placement.
Ever wondered how designers create that small bit of white space around text on Squarespace image collage blocks? Well, all it takes is some CSS code! This short snippet adjusts padding in Card and Stack image blocks on screens smaller than 640px; any image block layout you use this code for should test on mobile devices; changes made here will affect every other text block on your site.
Text Color
Custom fonts can add an extra creative element to your Squarespace site. This tutorial will teach you how to add them through the Image Block and apply them to certain text classes.
Adobe Fonts will replace fonts that have been retired by visiting Site Styles’ Fonts page and reviewing styles listed for it. If unsure, visit Fonts page in Site Styles and review listed styles to determine whether your font has been retired.
Make any block in your site have soft corners with this straightforward CSS code and adjust its opacity according to your preference.
Font Style
Squarespace users know the beauty of CSS when it comes to tweaking their site design – particularly image blocks.
With this CSS snippet, you can easily create an eye-catching drop-shadow effect for text in image blocks. Just copy and paste this code into your Custom CSS Editor before saving!
Use this snippet to change the font style on a specific block, such as a Buyers Block. Simply replace ‘arial’ with your preferred font style.
Squarespace 7.1 differs from Squarespace 7.0 by enabling you to set image block styles within Site Styles rather than Design Panel. This change makes life simpler by eliminating extra CSS code for each image block’s appearance, and lessening any chance for typos or mistakes that could throw off your entire site (or, worse yet, cause browser bugs).
Font Size
Custom fonts are one of the easiest ways to personalize your Squarespace website and add personality and differentiation. Use Squarespace’s Custom CSS tool in your Design panel to quickly and effortlessly add a font of your choosing; creating one takes similar steps but is faster and simpler.
Before beginning, first make sure your font is available in Squarespace. To do so, click “Manage Custom Files” from your Design menu and search for its.otf or.ttf file before selecting “Upload”. Once uploaded, your custom font should appear as expected on your page.
Adjust the font size, letter spacing and line height by entering these settings in your Custom CSS. Changing padding for card and stack image blocks on screens smaller than 640px by adjusting textSize is also possible; you can add borderRadius corners or choose a color background of thumbnail images too!
