Archived topic

Hyphens not working for local hosted font

7 replies · Started by Dominik on January 25, 2022

Viewing posts 1–8 of 8

January 25, 2022 at 3:51 am #2092790

Hi there,

we are using a google font locally hosted and use hyphens: auto; wich usually works well in german.
But on this project, the words are splitting correct but the "-" is not shown (also is not showing the "-").

As soon as we switch to the Google hosted font, the hyphen is shown.
Strange is, that in one headline the "-" works (don't know why) with our local font.

hyphens

Do you guys have an idea what the issue could be?

Thanks
Dominik

January 25, 2022 at 5:16 am #2092861

Hi there,

i checked the URL you provided, i can see the Libre Franklin font being loaded locally and on Chrome, FF, Safari i can see the Hyphenation working. FF does behave differently to the others but each browser has different support for hyphen.

January 25, 2022 at 7:42 am #2093013

Hi David,

does the hyphenation works for you?
We only see this issue on chrome – but it might be a browser/device (chrome/iOS) issue, if it works well for you.
But strange, that it is working as soon as we change to the google hosted webfont.

And also strange – as soon as I make a global style, the hyphens "-" are shown.

January 25, 2022 at 8:20 am #2093250

Yeah - i see them on all browsers - here it is on Chrome with Dev Tools open so i could see where the font is loaded locally:

https://www.screencast.com/t/CDudmDG7

I can see a LOT of 404 Error relating to the Work Sans font that you may want to fix

January 26, 2022 at 1:04 am #2093936

Thanks for the input regarding Work Sans – fixed it.
We tested again. We see this issue also on android devices and iphones.

And also on other pages we have made with GeneratePress – but only recently. Could be related to an update.

As soon as we switch to Google hosted font or as soon as we switch to a global style – the "-" is displayed.

January 26, 2022 at 4:28 am #2094128

Is there another page where one i can see Hyphenated Headlines ?
Ideally one that is set to Global Style and one that is not.

January 28, 2022 at 2:54 am #2096850

Hi David,

on the bottom of this test page, you can see a headline built with GB without global style (first one) and one built with global style (second one).

Screenshot

See the issue still on Chrome on MacOS but strangely it is working on iphone and Android Phone now.

January 28, 2022 at 5:43 am #2096974

I checked on MacOS and iOS - Chrome / Safari / Firefox. And all browsers showed hyphens on both of those headlines.
Heres a snapshot on iOS Chrome:

https://www.screencast.com/t/Bj42TaiA

The thing is - there is no difference in the CSS properties being applied to either element.
Neither GP or GB add any CSS Hyphen properties which would affect a Headline with a Global Style or without a global style. And neither of them have any influence over the font encoding or how a browser determines the use of hyphens.

It's very odd that you're getting such random results. Aside from a cache delivering the incorrect CSS or a browser extension interfering with the text rendering i can't say what is causing you the issue.

This archived topic is closed to new replies.

Start building better websites today.