Jump to content

Typography question - letter with a macron ā

Go to solution Solved by iamdavehart,

Recommended Posts

Hi There,

I have a special character I need to add to a word on this site.  

The word "whanau" should be "whānau".

However, when I add the special character via the text editor (copy paste), the text reverts to the default font - just for that letter:


There is an HTML entity for this: U+0101 - looking in Character Map:



Is there a way I can resolve this?

The font I am using is Omnes Pro (font-family: omnes-pro).

The section ID is #homepage-summary

Best regards.  And thanks for all the help so far.





Link to comment

The code you see on your computer is from the locally installed OpenType font which has the full set of characters. However, font files are quite large and as such when you use webfonts they are usually split up into smaller subsets (as most of the characters aren't used). Those subsets are usually conditionally rendered depending on whether a particular character is found in the page. 

The Omnes Pro font squarespace provide is from typekit and the particular unicode character you're looking for isn't in the subset provided so the browser is falling back to whatever default font it does have that character in. You can't directly alter the subsets that typekit download as they are done through Squarespace.

However, with a bit of trial and error it does seem like you can overwrite the particular subset it brings down by modifying the font family declaration. so if you add this to your custom css you might find it works (I've only done this for the normal font weight, but it seems to work).

@font-face {
  font-family: omnes-pro;
  src: url(https://use.typekit.net/af/fab690/000000000000000077359bed/30/l?subset_id=1&fvd=n5&v=3)
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-display: auto;


Some things to note:

  • I've completely (luckily and succesffully) guessed the subset_id so no idea whether that will break other unicode characters, but it works for this particular problem
  • I'm not sure whether squarespace embed a unique code for each site, but give it a try.
  • This definitely won't work if you change the font style / weight, you'd need a different set of CSS for that.
  • Overwriting the default font rule for the whole site when it's just one word on one page seems overkill, so perhaps put that inside a style block on the particular page header if you can.
  • Interestingly some of the google font collections that squarespace uses (e.g. Poppins) will render this unicode character correctly as it provides multiple subsets in a single stylesheet that are conditionally loaded, and has a subset that covers this range.


here's a gif of me pasting that code into my site and the macron loading:


Edited by iamdavehart
only add for specific page if you can

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 2 weeks later...

Hi @iamdavehart

  Thanks for your reply.  I am still having trouble with this one.


I have tried two things:

  1. Adding your supplied code into the advanced settings field for the index section #homepage-summary
  2. Deleted the above, and added the code to the sitewise css under the design tab.

Either way, the macron gets ignored and doesn't change.

With the code injection with the page settings, I have made sure that the style has been nested within <style></style> tags:


I am at a bit of a loss as to what to do next.

Is there something I am missing?

I have commented out the site-wise code for now, and left your code in the header injection of the #homepage-summary section.

Gratefully for any advice.

So far it is likely only two pages will need the macron on the whole site.





Best regards.

Edited by Bookworm
Link to comment

the code I posted will only work if it's got the default styling on it, so it's possible that you have a different style, font-weight or something like that on it. Also, you might find that the typekit link is slightly different for you. (mentioned both of these in the notes - it's not a personalised solution as can't see your site)

so, to be sure that you've got it right you'll need to know what size/font-weight you're targeting, and also to check the typekit link is correct for your chosen font.

easiest way to do that is to inspect the elements using Chrome's developer tools and search the source for "omnes-pro". if you don't want to do that, then feel free to put the link to your site here (publish it behind a password if its not ready yet and put the password here) and I'll have a quick look for you.


Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Hi @iamdavehart,

Thanks for your support.  The webpage link is below and it section needing the macron is just below the banner:


In the advanced section for the home-page-summary module, I have added your code with the only change being that I have changed the font-size to 400:


In the text editor, I had assigned the font size to H3:


And styled that block with css:


#block-yui_3_17_2_1_1621067205881_10443 h3 {
  color: #212121;
  font-weight: 400;

  Any help appreciated.

Best regards.

Link to comment
  • Solution

ok, I looked up the fonts in your page source and they're slightly different, so if you add this code to that page it should work

  src:url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/l?subset_id=1&fvd=n4&v=3) format("woff2"),
     url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/d?subset_id=1&fvd=n4&v=3) format("woff"),
     url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/a?subset_id=1&fvd=n4&v=3) format("opentype");



Edited by iamdavehart
added screenshot of it working

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 2 weeks later...
  • 2 months later...

Hope you don't mind me piggy backing off of yours, Bookworm! 

I hope you see this @iamdavehart!! I have checked out all of your answers in regards to this topic and I am still struggling immensely with this and I swear you're my last hope!

I have tried a bunch of different coding styles to see if I can make the macrons appear, i've added !important, watched countless videos, read countless blogs and I am still having no luck! 

Here are two of the coding texts i've used: 



@font-face {

font-family: alda,serif;

font-weight: 700;

font-style: normal;






h1 {!important}


font-family: 'alda';}



h2 {!important}


font-family: 'alda';}



h3 {!important}


font-family: 'alda';}



h4 {!important}


font-family: 'alda';}



.sqsrte-large {!Important}


font-family: 'alda';}




p {!Important}


font-family: 'alda';}



.sqsrte-small {!important}


font-family: 'alda';




@font-face {
font-family: 'ALDA';
src: url(https://use.typekit.net/yfh4dir.css);
h1, h2, h3, h4 {font-family: 'ALDA'!important }
p, h3 {font-family: 'ALDA'!important }




This is the font her: https://fonts.adobe.com/fonts/alda 

Can you please help me and tell me what im doing wrong? 

I will be sooooo grateful!!!!!!!!!!!!!!!!!!!!!! 


All my best, 






Link to comment


OK, your code is wrong because you're trying to link to Adobe's provided stylesheet as if it were the font itself, which doesn't work. However, to get the macrons this is really a question about how to set up web projects on Adobe.

First thing to do is to get your code right. you need to add a link element that links directly to the adobe stylesheet. best to do this in your header injection code if you're on premium. if you're not you can probably just inject a code block into your footer.

<link rel="stylesheet" href="https://use.typekit.net/yfh4dir.css">

then you can add your css rules which will tell it to use the font. something like you've already tried will work here. put them into your Custom CSS, or embed them in style tags within a code block. note that the font-weights must match exported versions of the fonts. you'll be able to see what those are when you edit the font project in adobe (coming up...)

p,h1,h2,h3,h4 { 
  font-family:'alda' !important; 

this should make everything go all 'alda'... but the macrons will probably not go into the alda font. this is because of the problem I've written about in previous posts in this thread. Web fonts are made as small as possible and therefore don't export all the characters by default. To change this you'll need to go into your adobe account which is providing the font. go to https://fonts.adobe.com/my_fonts#web_projects-section and once you have signed in you'll need to edit the project's exported character sets. It will be set to default. 



at this point you can modify the character set, you can click "All Characters" or "Language Subsetting" and include specific character sets. probably better to do that in your case. You can also see here the different weights being exported...

click "Save Changes" at the bottom. You'll have to wait a little while the font changes are propagated through adobe's content delivery network, but after a minute or two press refresh on your website and the macrons will appear.






Edited by iamdavehart
tagging bonneedshelp

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 6 months later...

@Charlottenz the font of your paragraphs are not being targeted by a rule with your new font. I would set the base font variable in your custom css like this. that should do it.

:root { 
 --body-font-font-family: 'gotham';
 --heading-font-font-family: 'gotham';
 --meta-font-font-family: 'gotham';

btw, in future, it's probably better to start a new question. especially if the original post has already been marked as solved

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 1 month later...
  • 3 months later...

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.