Using Alternate Glyphs in Squarespace

Hi, all!

I'm using the font Quiche Sans Medium in my website, and I'd like to use an alternative glyph throughout my site in place of the default. To be more specific I'd like to replace the default capital "R" with another version. Does anyone know how to do this? I've loaded the fonts that I'm using directly from Adobe Typekit, if that helps to answer the question.

Thanks!

This was fun to code and I hope that this helps you. You'll need a business plan or higher to use the Javascript.

Start by inserting the code into your Custom CSS: Home > Design > Custom CSS

.megan-R {
  font-family: "YOU_FONT_HERE";
  color: dodgerblue; /* for display purposes to see it's working */
}

Insert the following script into your footer code injection: Home > Settings > Advanced > Code Injection/Footer:

<script>
const meganR = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

for (const heading of meganR) {
  heading.innerHTML = heading.innerHTML
    .replace(/R/g, '<span class="megan-R">R</span>');
}
</script>

Save and you should see your pages update to your new font and in the color blue, though, you can change this to whatever you like.

Best,

Dan

Thank you, Dan! I'll give it a try!

Hello I have a similar issue with this. I'm using the font Mango loaded as custom font. I have made the first code work on my headings but not the script. Hope you can take a look as well on my website. Any help would be greatly appreciated!

https://osloeventhub-copy.squarespace.com/

password: oehcopy

12 hours ago, Eivind_ said:

Hello I have a similar issue with this. I'm using the font Mango loaded as custom font. I have made the first code work on my headings but not the script. Hope you can take a look as well on my website. Any help would be greatly appreciated!

https://osloeventhub-copy.squarespace.com/

password: oehcopy

Can you describe be in more detail this: "my headings but not the script"?

Hello, Thank you for your reply!

I managed to make this one work using this code on my site:

.sqs-block h1 {
  font-family: "Mango";
  color: dodgerblue; /* for display purposes to see it's working */
}

In reference to this

On 11/3/2021 at 6:02 AM, Wolfsilon said:

.megan-R {
  font-family: "YOU_FONT_HERE";
  color: dodgerblue; /* for display purposes to see it's working */
}

But for this 2nd set of codes I'm not sure how to make it work on my site. Hope you can help me with this.

On 11/3/2021 at 6:02 AM, Wolfsilon said:

<script>
const meganR = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

for (const heading of meganR) {
  heading.innerHTML = heading.innerHTML
    .replace(/R/g, '<span class="megan-R">R</span>');
}
</script>

Thank you!

On 11/2/2021 at 6:02 PM, Wolfsilon said:

This was fun to code and I hope that this helps you. You'll need a business plan or higher to use the Javascript.

Start by inserting the code into your Custom CSS: Home > Design > Custom CSS

.megan-R {
  font-family: "YOU_FONT_HERE";
  color: dodgerblue; /* for display purposes to see it's working */
}

Insert the following script into your footer code injection: Home > Settings > Advanced > Code Injection/Footer:

<script>
const meganR = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

for (const heading of meganR) {
  heading.innerHTML = heading.innerHTML
    .replace(/R/g, '<span class="megan-R">R</span>');
}
</script>

Save and you should see your pages update to your new font and in the color blue, though, you can change this to whatever you like.

Best,

Dan

Hey!!  I was wondering how to add additional letters or letter combinations (for example “ea”) as well as body font to this script?  Thank you so much!!! 
 

trying to use Idealist font by Nicky Laatz https://nickylaatz.com/shop/199-idealist-serif

which has a lot of combo alternates.  Any suggestions?  Thank you!!!

Hi,

To clarify, I provided the code above under the assumption that there were many instances of "R" in the headings on the site. If you have not completely built out your site, the simplest method is to do this manually, using a code block.

<h1> This <span class="alt-is">is</span> my <span class="alt-glyph">new</span> website </h1>

You would then set the new font that you want for "new" using custom CSS.

.alt-glyph {
font-family: "BLAH_BLAH";
color: dodgerblue; // random display property //
font-size: 24px; // random display property //
font-weight: bold; // random display property //
}
.alt-is {
font-family: "BLAH_BLAH";
color: deeppink; // random display property //
font-size: 24px; // random display property //
font-weight: bold; // random display property //
}

However, if you don't want to manually do this for all instances AND If I'm understanding you correctly, you want all "e"'s and all "a"'s to receive a different color/font family treatment? The simplest method would likely cause all instances of "e" and "a" on the site to be updated, not necessarily in combination.

You could try to add and replace this line with a new string:

.replace(/ea/g, '<span class="devon-ea">ea</span>');

Custom CSS:

.devon-ea {
font-family: "BLAH_BLAH";
color: dodgerblue; // random display property //
font-size: 24px; // random display property //
font-weight: bold; // random display property //
}

@Wolfsilon thank you so much!  The ea to which I’m referring is in the instance of the word “beach” where the letters are always ext to each other.  Also I’m curious, if I’m using the exact same font, which was downloaded with glyphs, how would I identify the glyphs portion of that same font within the css?  Thanks for any insight you can provide!! 

Hello everyone, 

I have a similar issue and would appreciate the community's support on this 🙂

I use the adobe font “Adelle Sans” which supports the special characters I need for Te Reo Māori – unfortunately they are always replaced with a random sans-serif font. How can I make sure the letters ā, ō, ū are always displayed with Adelle Sans, the font itself supports the characters?

Kia ora,

John

@JohnJohn Just be sure that you're targeting the text as specific as you can with your CSS

@DevonHarris I think the best solution is to separate the "ea" in all instances manually. You would use a code block to achieve this:

<h1>B<span class="glyph">ea</span>ch</h1>

CSS:

.glyph {
font-family: "FONT_HERE";
color: "COLOR_HERE";
}

That's how you would target the letters with CSS, as for actually inputting the glyphs? That's kind of a keyboard thing, maybe use ALT/Control + Shift? I might not be understanding exactly what you mean.

I used an alternate font in my rush to launch that worked great

@Wolfsilon Wondering if you (or anyone else) could help me with some code here. 

Going to be using Proxima nova throughout and want to use the contemporary stye of the a! (on the left) not the default a (on the right)

How would I tailor the code to suit?

Cheers!

On 10/5/2022 at 9:03 AM, JohnJohn said:

Hello everyone, 

I have a similar issue and would appreciate the community's support on this 🙂

I use the adobe font “Adelle Sans” which supports the special characters I need for Te Reo Māori – unfortunately they are always replaced with a random sans-serif font. How can I make sure the letters ā, ō, ū are always displayed with Adelle Sans, the font itself supports the characters?

Kia ora,

John

@JohnJohn@Wolfsilon is there a code to replace the text automatically rather than targeting specific instances? Ngā mihi

I hope this is okay to bump a year or so later.

I have also downloaded and loaded up an Adobe font but I want to swap out The A, R, O, C, N, D, F, H,  and E for their alternate Glyphs site-wide anywhere they appear.

If I can figure one letter out I might be able to figure the others out in code. I tried the first code in the responses but it doesn't work and with all the changes over time I'm not sure if It's just different now or if it's how I tried to do it.

I'm not very quick or experienced with code and help would be Greatly Appreciated.