Typography question - letter with a macron ā

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.

 

 

 

 

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:

Edited November 28, 2022 by iamdavehart
only add for specific page if you can

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.

 

Thanks.

 

 

Best regards.

Edited December 7, 2022 by Bookworm

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.

 

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:

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

And styled that block with css:

 

  Any help appreciated.

Best regards.

Hi @iamdavehart, so stoked to say that I got this to work.  Initially I added it to the page only Advanced settings, which didn't work, but when I added it site wide also, it did.

I don't understand it, but it works, which is the main thing.  And I couldn't have done it without you.

Cheers.

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: 

// CUSTOM FONT

 

@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';

 

and 

 

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

 

Bon 

 

 

 

@bonneedshelp

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; 
  font-weight:700;
}

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 February 20, 2023 by iamdavehart
tagging bonneedshelp

You are absolutely incredible. Thank you SO so much. Changing the settings in the Adobe Character Set and injecting that into the header/footer changed everything!

I am so grateful for you. ❤️ 

Thank you so much Dave!!!!!!!!! You are an angel. 

@iamdavehart i'm wondering if you can also give me a hand, i've added 'gotham' as a custom font, tried to force it with code. Any additional options?

The issue is with the word Kāhui which is throughout the site.

website can be found at kahuistdavids.nz
Password khyberpass70

 

Thanks.

Charlotte

Hi @iamdavehart thanks so much for whatever you did  - looks like it's solved it for the Gotham-bold, but not in the paragraph text which is Gotham.  Any tips?

 

@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 September 11, 2023 by iamdavehart

Thank you so much!

 

 

Hi @iamdavehart
Could you please help me as well with an issue of vowels (Umlaute in German) on my website?
They are displayed correctly on all browsers except Safari. See image attached.

https://www.elysia-living.ch/
PW: EL2024

Many thanks
Sibylle