Megan_Leigh Posted November 2, 2021 Share Posted November 2, 2021 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
Wolfsilon Posted November 2, 2021 Share Posted November 2, 2021 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 Megan_Leigh 1 Link to comment
Megan_Leigh Posted November 4, 2021 Author Share Posted November 4, 2021 Thank you, Dan! I'll give it a try! Link to comment
Eivind_ Posted September 20, 2022 Share Posted September 20, 2022 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 Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Eivind_ Posted September 21, 2022 Share Posted September 21, 2022 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
DevonHarris Posted September 24, 2022 Share Posted September 24, 2022 (edited) 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 September 24, 2022 by DevonHarris Link to comment
Wolfsilon Posted September 25, 2022 Share Posted September 25, 2022 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
DevonHarris Posted October 3, 2022 Share Posted October 3, 2022 @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
JohnJohn Posted October 4, 2022 Share Posted October 4, 2022 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 Link to comment
Wolfsilon Posted October 5, 2022 Share Posted October 5, 2022 @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
cami_leisk Posted October 21, 2022 Share Posted October 21, 2022 (edited) I used an alternate font in my rush to launch that worked great Edited November 14, 2022 by cami_leisk used workaround Link to comment
donovanryan Posted November 1, 2022 Share Posted November 1, 2022 @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! Link to comment
melaniejaane Posted November 4, 2022 Share Posted November 4, 2022 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 Link to comment
Matchapeaches Posted April 26, 2023 Share Posted April 26, 2023 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. NewtonDesignCo 1 Link to comment
Bobharris Posted May 8 Share Posted May 8 Hoping we can get some sort of fix for this in Squarespace 7.1 I'm not sure if it would be best to put this comment here or if I should start a new thread. Do Squarespace fonts contain every glyph normally available in the font or is it only the default glyphs? MissTippyTap 1 Link to comment
MissTippyTap Posted May 16 Share Posted May 16 Hi All, I'm running into a similar issue. I've purchased the font Elyaris from Creative Market. It has over 300 glyphs. Right now, the font is displaying in the basic character set (pictured left). I would like to incorporate more of the "swirly" characters (pictured right). I've followed this tutorial and have not had success activating the glyphs: Any suggestions or recommendations on how to turn on the glyphs for this font? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment