Scandinavian fonts missing A and O dots in Edge

[Omwoods]

Hi! My client brought up a strange issue today which I haven’t seen. It appears to happen on Edge browser. The dots on Ä and Ö letters are in the wrong place, and this doesn’t happen on any other browser/situation that I’ve seen.

The site is under Coming Soon page, I’ll put in access details below so you can view the site.

Do you have any thoughts on why this is happening? And if there’s a way to fix it.

This is happening on the fonts I’ve chosen in X Themes - Typography for headings and body, Bellefair and Red Hat Text. The third “custom” font, Caveat, that looks like script/handwritten, doesn’t seem to have this issue on Edge.

[friech]

Hi Bhakti,

Thank you for writing in but sorry that seems to be a browser incompatibility issue. What I can only suggest is to use a separate font-family when viewed on IE or Edge. You can use the CSS media query below for targeting just IE.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

CSS hacks to target latest IE 11 and Edge versions.

Hope it helps,
Cheers!

[Omwoods]

Thanks for this! I added the code but am not sure if it works. One of my computers is a PC and I checked, and actually see the dot issue still on the Edge too (latest version of everything). Should the above code work on Edge too? Could you take a look at the site (details in my first post) and see if I’m doing it correctly, and if we could add something for Edge specifically?

This is what I added so far:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
p {
font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;
}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 , .h6 {
font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;
}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;
}
}

[nabeel]

Hey Bhakti,

The above code might not work in Edge, to target the Edge browser specifically you can use this code instead:

@supports (-ms-ime-align: auto) {
  body {
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
  }
}

Further explanation, including variants to support specific versions of Edge, can be found here

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Omwoods]

This worked! Thank you!!

[friech]

We are delighted to assist you with this.

Cheers!