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:

image.jpeg.81860e71a290cf64bb204f9593a738df.jpeg

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

 

image.jpeg.4d9035497c18603e9b8834cf73111ce8.jpeg

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)
      format("woff2"),
    url(https://use.typekit.net/af/fab690/000000000000000077359bed/30/d?subset_id=1&fvd=n5&v=3)
      format("woff"),
    url(https://use.typekit.net/af/fab690/000000000000000077359bed/30/a?subset_id=1&fvd=n5&v=3)
      format("opentype");
  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:

image.gif.6dfbbab2f4c9d6d80c5b3b8fe201ff4d.gif

Edited by iamdavehart
only add for specific page if you can

Dave Hart. Software/Technology Consultant living in London

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:

image.thumb.jpeg.5205200c1587e835d73745b5f0a847c5.jpeg

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.

 

Thanks.

 

 

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

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:

https://www.cleanplate.co.nz/

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:

image.jpeg.216d54f6853b0bda0c1b6be35485e46d.jpeg

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

image.jpeg.622096be580216d9e1a5888506cc90ac.jpeg

And styled that block with css:

 

#block-yui_3_17_2_1_1621067205881_10443 h3 {
  color: #212121;
  font-family:'omnes-pro';
  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

<style>
  @font-face{font-family:omnes-pro;
  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");
  font-weight:400;
  font-style:normal;
  font-stretch:normal;
  font-display:auto;
}
</style>

 

macron.gif

Edited by iamdavehart
added screenshot of it working

Dave Hart. Software/Technology Consultant living in London

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