Jump to content

Using Alternate Glyphs in Squarespace

Recommended Posts

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!

Link to comment

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

Link to comment
  • 10 months later...
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"?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

Link to comment
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!!!

Edited by DevonHarris
Link to comment

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 //
}

 

Link to comment

@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!! 

Link to comment

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

Screen Shot 2022-10-05 at 8.52.57 AM.png

Screen Shot 2022-10-05 at 8.52.37 AM.png

Screen Shot 2022-10-05 at 8.58.55 AM.png

Link to comment

@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.

Link to comment
  • 3 weeks later...
  • 2 weeks later...
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

Screen Shot 2022-10-05 at 8.52.57 AM.png

Screen Shot 2022-10-05 at 8.52.37 AM.png

Screen Shot 2022-10-05 at 8.58.55 AM.png

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.