2014-11-13 Chrome and this Wiki

I’ve been using Chrome for a day now and this wiki doesn’t look as good as it does using Firefox, on Windows.

1. The emoji at the bottom are mostly unsupported.

2. The bold text (”fix typos” and “updates by email”) is fuzzy at the bottom.

3. The anti-aliasing doesn’t look good (c, e, r, etc.) at the default size (Ctrl 0).

Something about the fonts is not making me happy.

Googling... Stackoverflow has something about webfonts, anti-aliasing, and a note that 37 will fix this. I guess I hadn’t used Chrome in a *long* time. Let’s see whether an update fixes this.

Stackoverflow

Restarting... I am not impressed. 🙁

Adding Symbola to the site and to the CSS.

Fiddling some more. Increased the font size. Getting rid of Arial Narrow or whatever it was for header and footer. Getting rid of bold for the moment and replacing it with small caps. WTF am I doing!?

Unhappy... Noticia Text by JM Solé? Should I use the webfonts from the Google network or serve from my own server? More traces being left behind...

Noticia Text

Built `sfnt2woff` to convert ttf files to woff. The files are significantly smaller, now. Using Noticia Text and Symbola by George Douros (for the smileys). Everything seems to work on Chrome. Now anti-aliasing for the header and footer looks a bit crummy on Firefox (Windows). Wow. Such pain.

Symbola

At home... Things look pretty good on Firefox (OSX). Oh well. I think this is going to be the new look for a while.

2011

2012

2013

2014

​#Web

Comments

(Please contact me if you want to remove your comment.)

Iceweasel on Linux, gotobar looks awful after your recent changes (wrapping):

http://files.progarm.org/2014-11-14-164928_993x71_scrot.png

And I’ve always had this:

http://files.progarm.org/2014-11-14-165014_1149x107_scrot.png

– AlexDaniel 2014-11-14 14:56 UTC

AlexDaniel

---

The gotobar looks OK? Perhaps it was pure chance that it didn’t wrap with the previous font size (and using a narrow font). I wonder why you’re not getting more emojis. I though Symbola had them all covered. Oh well.

– Alex Schroeder 2014-11-14 16:08 UTC

---

No, it is distracting. If you change the width of the input fields to 8ex then it will not wrap. Alternatively you can make “Search” and “Matching Pages” text smaller. But please, stop this line wrapping thing. Maybe I could live with it if “Matching pages” thing was under “Search”, but having input fields on the left and on the right just bugs me.

– AlexDaniel 2014-11-14 22:06 UTC

AlexDaniel

---

OK, second attempt: keeping search and matching pages together.

– Alex Schroeder 2014-11-15 07:35 UTC

---

I don’t like the result on my phone. Argh.

– Alex Schroeder 2014-11-15 12:59 UTC

Alex Schroeder

---

Alright, that’s better!

But maybe you should increase line spacing a little bit? So that search field does not get so much into gotobar buttons. That would be perfect!

http://files.progarm.org/2014-11-16-035159_618x66_scrot.png

– AlexDaniel 2014-11-16 01:58 UTC

AlexDaniel

---

I’m not sure whether d0cdd4 was supposed to fix smileys, but they are still not showing up.

d0cdd4

– AlexDaniel 2015-01-19 00:40 UTC

AlexDaniel

---

Hm, they are showing up on my system...

https://i.imgur.com/WNWVG8Y.png

You linked to a change of an Oddmuse CSS, but this site uses the same solution, I think. Specifying the Symbola font as the fallback.

– Alex Schroeder 2015-01-19 10:07 UTC

---

It seems like Symbola font is not being loaded at all. Weird.

– AlexDaniel 2015-01-19 12:06 UTC

AlexDaniel

---

Hm, but you can access the font via its URL? `https://alexschroeder.ch/fonts/Symbola.ttf`

– Alex Schroeder 2015-01-19 13:23 UTC

---

Sure.

Does it work for you in firefox? I mean, can you see Symbola font being loaded in the Network tab in the developer tools? (with ctrl+f5)

– AlexDaniel 2015-01-20 02:27 UTC

AlexDaniel

---

No, because I have installed it locally. I can see all the characters on my iPhone 4, however. That must mean it manages to download the font, right?

– Alex Schroeder 2015-01-20 11:27 UTC

Alex Schroeder

---

Hm. Deleted the font, used Chrome, and now I see how it no longer works. D’oh! I see, however, that `Symbola.woff` is being downloaded, with a Status 200. The response header looks OK as well.

HTTP/1.1 200 OK
Date: Tue, 20 Jan 2015 11:31:14 GMT
Server: Apache
Last-Modified: Thu, 13 Nov 2014 09:37:03 GMT
Accept-Ranges: bytes
Content-Length: 18608
Cache-Control: max-age=3600
Expires: Tue, 20 Jan 2015 12:31:14 GMT
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Content-Type: application/x-font-woff

– Alex Schroeder 2015-01-20 11:33 UTC

---

The font is still not installed locally. Trying Firefox. I see that the font is *not* downloaded – but the characters display correctly with the sole exception of 🐋. WTF.

– Alex Schroeder 2015-01-20 11:35 UTC

Alex Schroeder

---

In addition to that, Firefox seems not to be using the Noticia Text font. I don’t know what’s going wrong today but something’s wrong.

– Alex Schroeder 2015-01-20 11:43 UTC

Alex Schroeder

---

I think I will remove all those emoji from the footer and just install smiles.pl – those should always work! 😄

smiles.pl

– Alex Schroeder 2015-01-20 12:06 UTC