Opened 6 years ago
Closed 6 years ago
#29832 closed Bug (fixed)
Update Roboto font to v2.137
Reported by: | Eternal Sorrow | Owned by: | Mac Chapman |
---|---|---|---|
Component: | contrib.admin | Version: | 2.1 |
Severity: | Normal | Keywords: | |
Cc: | Triage Stage: | Ready for checkin | |
Has patch: | yes | Needs documentation: | no |
Needs tests: | no | Patch needs improvement: | no |
Easy pickings: | no | UI/UX: | no |
Description (last modified by )
Django admin by default uses outdated version of Roboto font, that has some visual bugs, for example, in light weight the right french quotation mark is ugly and cyrillic "щ" looks just like "ш" (see attachments).
Attachments (1)
Change History (18)
by , 6 years ago
Attachment: | cb2dfbdb-6065-4313-b1e1-b4692777005a.png added |
---|
comment:1 by , 6 years ago
Description: | modified (diff) |
---|
comment:2 by , 6 years ago
Description: | modified (diff) |
---|
comment:3 by , 6 years ago
Looks like the webfont that Django originally sourced from hasn't been updated in a long time. I guess we'd need to generate new woffs from https://github.com/google/roboto.git.
- The commit that added the font to Django: https://github.com/django/django/commit/35901e64b043733acd1687734274553cf994511b#diff-29ba8bf0e3d3ed401111c144b1842edeR1
- Woff downloads, last changed 2012: https://code.google.com/archive/p/roboto-webfont/downloads
comment:4 by , 6 years ago
Summary: | Update Roboto font bundled with django admin → Update Roboto font |
---|---|
Triage Stage: | Unreviewed → Accepted |
comment:5 by , 6 years ago
Owner: | changed from | to
---|---|
Status: | new → assigned |
I've built the fonts from source and got this working locally. I'll turn it into a PR shortly.
comment:6 by , 6 years ago
Could you document the steps to build the fonts here so that we have that recorded?
comment:7 by , 6 years ago
Yeah, sure thing. I'm looking at working upstream to just present the woffs somewhere there - it's possible that I'm just missing them but I can't find them easily available. For the sake of including a valid licence etc it'd be best to just grab them from an official release.
comment:8 by , 6 years ago
Right, I've got the best I can do here, I think. I've pulled the latest TTFs down from https://fonts.google.com/specimen/Roboto and converted them to WOFF's using woff-tools.
PR here https://github.com/django/django/pull/10499
The readme at https://github.com/mozilla/zilla-slab contains pretty detailed notes on how to do this. I did this in Docker to avoid installing the requirements locally:
FROM buildpack-deps:stretch RUN mkdir /src WORKDIR /src COPY . /src RUN apt-get update && \ apt-get -y install ttfautohint woff-tools RUN \ for font in $(ls *.ttf); \ do \ sfnt2woff $font; \ done;
There's some chatter about web fonts on the Roboto repo https://github.com/google/roboto/issues/287 - I don't know a lot about fonts so I don't know if there's a good reason for them not shipping WOFFs as standard.
I've tested this with "щ" and it looks as intended, but I do not have the required grasp of languages to ensure that it's working properly for all alphabets. Please test it out and let me know how it looks! Thank you!
comment:9 by , 6 years ago
Can you explain how you got the TTF URLs from the fonts.google.com page? Do you know what version of the font this is? (e.g. I see some version numbers at https://github.com/google/roboto/releases).
comment:10 by , 6 years ago
If you click "select this font" on Google Fonts, there's a download link on the menu that pops up.
The version of the fonts is in the TTF metadata: "Version 2.137; 2017" (which, helpfully, is not available on the Roboto repo). Looking into this, it looks like I can set a version when I create the WOFF file, although I have not yet figured out how to read the version from a WOFF file to confirm that it's been added. I'll see if I can get it into the file, and if that doesn't work I'll put it in the readme.
comment:11 by , 6 years ago
Oh, here's the commit that adds the TTFs to Google Fonts - that's something https://github.com/google/fonts/pull/727
comment:12 by , 6 years ago
The roboto devs just pointed me at the excellent https://github.com/majodev/google-webfonts-helper which absolves me of any need to compile things on my own machine. I'll push the legit Google woffs ASAP.
comment:13 by , 6 years ago
Right, I've used https://github.com/majodev/google-webfonts-helper to pull the v2.137 font files from Google Fonts. I now believe they're the same files as Google themselves serve. I've added a mention of the webfonts helper to the font readme, too.
comment:14 by , 6 years ago
Nice! Which charsets did you select? I selected them all (not sure if that's the right thing to do) and it seems like I received different files than what's in your PR.
comment:15 by , 6 years ago
Hmm, I selected them all too - seemed sensible given that this is a cyrillic issue - and went for weights 300, regular (400), and 700, as listed in the readme.
Here are the files I used prior to renaming them to match the existing ones:
➜ shasum *.woff 3ea2c95e21cc88d82bb111c99883484c64d657db roboto-v18-cyrillic-ext_vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-300.woff e4774be50a91e83c4fdc647e27342d03a29fd215 roboto-v18-cyrillic-ext_vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-700.woff 96eca9934dff83a12371dd54fc6c1bf29256815a roboto-v18-cyrillic-ext_vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-regular.woff ➜ ls -l *.woff -rw-r--r--@ 1 mac staff 85692 11 Oct 18:03 roboto-v18-cyrillic-ext_vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-300.woff -rw-r--r--@ 1 mac staff 86184 11 Oct 18:03 roboto-v18-cyrillic-ext_vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-700.woff -rw-r--r--@ 1 mac staff 85876 11 Oct 18:03 roboto-v18-cyrillic-ext_vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-regular.woff
These match the files in my branch. What are you seeing?
(Thanks for your patience! I really appreciate it)
comment:16 by , 6 years ago
Has patch: | set |
---|---|
Summary: | Update Roboto font → Update Roboto font to v2.137 |
Triage Stage: | Accepted → Ready for checkin |
Thanks, now I see the same.
screenshot