Use glyphs (font variants) in Squarespace - Squarespace 7.1

Squarespace offers a great variety on fonts. The library of fonts to use on your template or website is pretty extensive. But it doesn’t contain all fonts (obviously) and you might have a custom font that you want to use on your website that fits with your logo or brand style. Your font might have font variants of font features. They refer to different glyphs or character styles contained within an OpenType font.
These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, capital letter variants etc. These are all referred to as OpenType Features, and are made available to use on the web via specific properties.

This tutorial will help you to access the font variants and to use it throughout your website. The first bit is about adding your custom font to Squarespace, you can scroll further down, for adding the glyphs/font variants.

Instructions

1. You picked a font with font-variants and you want to use these throughout your website. Your font should either come in a .TTF or .OTF format.

2. Time to add your font file to your Squarespace website. Navigate to the the Custom CSS editor of your Squarespace site. Go to Website > Website Tools > Custom CSS and click on the button ‘Custom Files’. This is the area where you can upload any images or fonts. Upload your custom font file here.

3. Time to add some CSS to your CSS editor to get the files that you just uploaded to work and use on your website. Copy and paste the code below into the Custom CSS box:

@font-face {
font-family: 'TEN POUNDS';  
src: url(your-font-link-here.ttf);
}

4. Change font-name to the name of your font. The font that I use for this example is called ‘TEN POUNDS’*. You can name the font-family to whatever you like. You will need it to reference it later.

5. Now we need to update the font URL’s. To change the font URL's, remove all the text between the brackets and add your cursor between the two first brackets. Then click on ‘Custom Files’ again, and then click on your font file. As soon as you click on the file you will see a URL automatically pasted in the Custom CSS editor (between the brackets) (see video for how to add these URL’s). 

Hit ‘Save’ , because you've just added your custom font. Now we need to add some more code, to display the font on our website.

6. To actually see your custom font on your website displayed, we need to add some code that changes one of your current Headings to your new font. For example: H1, H2, H3 or a P (paragraph/body font). We want to display the font for our H1’s, H2’s and our paragraphs.

Just paste the code below into the Custom CSS editor below the last code:

h1, h2, p {
font-family: 'YOUR FONT NAME';
}

By pasting this piece of code into your Custom CSS box, this will change your H1, h2, and p to your custom font. This code will overwrite your Style Settings from Squarespace, with your custom font. Remember to change the “font-name” to the same as the font name you added in the last code.

Here are the references for changing specific elements.

• h1 : Heading 1

• h2 : Heading 2

• h3 : Heading 3

• h4 : Heading 4

• p : All Paragraph fonts

• p.sqsrte-large : Paragraph 1 / Large Paragraph

• p.sqsrte-small : Paragraph 3 / Small Paragraph

h1, h2, h3, h4 {
font-family: 'TEN POUNDS';
}

Make sure to save your changes, and if you don’t see anything changing, refresh your page after saving.

7. Now we need to add some extra CSS to add specific classes for all the different font-variants from your font. Go to https://wakamaifondue.com/ and upload your font there. Scroll down to ‘layout features’ and you will get all the information about the different glyphs/font variants there are available and how to access them. You will see stylesets, character variants and other stylistic edits you can make with your font.

Go to download CSS and it will generate the classes for all the variants and stylistic sets for you. Copy all the CSS or download the file (you will need to open this file with a file editor such as coda or visual studio code to copy the CSS from there).

Go to the CSS editor in Squarespace and paste your copied css here.

*the font ‘TEN POUNDS’ is used for this tutorial only and is not used on any public website or commercial product.

8. There are multiple ways to add the font variants to your text. We’ll show you two examples to target text or even specific letters to add the font variant. We’ll start with targeting an entire paragraph first and after that we target a specific letter of a word.
In the example in the video we have a H2 at the top of the section and a paragraph on the left. They just changed to the new font we added (the regular font without the variants/glyphs. Now we want to target the paragraph and change all letters from our chosen stylistic set.

ADD GLYPHS TO AN ENTIRE PARAGRAPH

Go to your page settings and paste the piece of code below. From our stylistic sets listed visually at https://wakamaifondue.com/ we choose the set ‘-ss01’ to apply to our paragraph. Below you see a piece of code of jQuery. Basically it will create a function that looks for the p elements (paragraphs) on the page and applies the class .-ss01 to it. This means it will apply stylistic set -ss01 to all paragraphs on the page. To make it more specific you can replace the p with an ID or a :first-of-type if you want to target the first paragraph only. There are more CSS selector you can choose from, to target a specific element. see https://www.w3schools.com/cssref/css_selectors.php. As soon as you save the code on your page, you will see the glyphs applied to your paragraph. In edit mode, it won’t show the glyphs.

(you can also add this piece of code website wide to target all the paragraphs, you will use the code injection in the header of the website, instead of the specific page).

<script>
$(document).ready(function() {
  $("p").addClass("-ss01");
});
</script>

ADD GLYPHS TO A SPECIFIC LETTER OR WORD

Go to your page settings and paste the piece of code below. We want to target the “G'“ from Glyphs, the “F” from Font and the “V” from Variants. From our stylistic sets listed visually at https://wakamaifondue.com/ we choose
-ss09 for the G
-ss01 for the F
-ss08 for the V

Below you see a piece of code of jQuery. Basically it will create a function that looks for a word (only in the headers 1 to 6) and replaces it in the HTML with a span and a class added to that span. It only applies to that specific word. So below you see that there is a span wrapped around the three first (capital) letters of the 3 words. !!NO TYPOS, or it won’t work!! Also capital sensitive, so be precise!!
As soon as you save the code on your page, you will see the glyphs applied to your words. In edit mode, it won’t show the glyphs.

<script>
  $(document).ready(function () {  
const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

for (const heading of headings) {
  heading.innerHTML = heading.innerHTML
.replace(/\bGlyphs\b/g, '<span class="-ss09">G</span>lyphs')

.replace(/\bFont\b/g, '<span class="-ss01">F</span>ont')  
  
.replace(/\bVariants\b/g, '<span class="-ss08">V</span>ariants')
;
}
  });
  </script>

That’s it, Beautiful!!
I hope that makes sense. If you have any questions or issues with adding the code, feel free to reach out to me!