Fix font import

Question

Fix font import

Opened this issue 5 years ago · 9 comments

Answer 1 · 2019-07-01T18:55:22.000Z

@hacdias @fabiofcferreira: For some reason the font displays in a different way. Do you know what's going on? How may I solve this issue?

Here's a blog URL: https://blog.hotscope.io/fail-fast/

Answer 2 · 2019-07-01T20:02:58.000Z

@malikpiara

After checking the font-weights in the images I came to the conclusion that maybe Safari is rendering that h1 tag with a different font-weight but I may be mistaken. However, since I'm writing this on a Windows machine I can't really tell for sure.

Therefore, to solve this, I guess you should define that h1 tag to have its font-weight set to 500.

Answer 3 · 2019-07-01T21:38:48.000Z

Also happening on the phone, android too.

Answer 4 · 2019-07-02T04:38:34.000Z

Just check the pages witht the tips I gave you and come back with some feedback. What you said strengthen my doubts about the browser the page is displayed in.

Answer 5 · 2019-07-02T19:11:18.000Z

@fabiofcferreira I changed the font-weight before commenting. Also ran some other tests.

Answer 6 · 2019-07-02T20:18:34.000Z

Answer to that: https://stackoverflow.com/a/30878469.

Answer 7 · 2019-07-02T20:35:36.000Z

We know Malik very well and I'm sure he will want a solution for both browsers to render exactly the same. 😆
The second link discusses the -webkit-font-smoothing property, which Hotscope CSS already includes. This is rather strange.

Perhaps it could be Safari?

Answer 8 · 2019-07-02T20:43:52.000Z

I really doubt it can be solved. There will always be differences in the way browsers render text. As it is stated in that reply:

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Answer 9 · 2019-07-02T20:45:15.000Z

Agreed.

…

On 2 Jul 2019, 9:43 PM +0100, Henrique Dias ***@***.***>, wrote: I really doubt it can be solved. There will always be differences in the way browsers render text. As it is stated in that reply: > If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.