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 Eternal Sorrow)

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)

cb2dfbdb-6065-4313-b1e1-b4692777005a.png (11.8 KB ) - added by Eternal Sorrow 6 years ago.
screenshot

Download all attachments as: .zip

Change History (18)

by Eternal Sorrow, 6 years ago

screenshot

comment:1 by Eternal Sorrow, 6 years ago

Description: modified (diff)

comment:2 by Eternal Sorrow, 6 years ago

Description: modified (diff)

comment:3 by Mac Chapman, 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.

comment:4 by Tim Graham, 6 years ago

Summary: Update Roboto font bundled with django adminUpdate Roboto font
Triage Stage: UnreviewedAccepted

comment:5 by Mac Chapman, 6 years ago

Owner: changed from nobody to Mac Chapman
Status: newassigned

I've built the fonts from source and got this working locally. I'll turn it into a PR shortly.

comment:6 by Tim Graham, 6 years ago

Could you document the steps to build the fonts here so that we have that recorded?

comment:7 by Mac Chapman, 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 Mac Chapman, 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.

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.

Version 0, edited 6 years ago by Mac Chapman (next)

comment:9 by Tim Graham, 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 Mac Chapman, 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 Mac Chapman, 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 Mac Chapman, 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 Mac Chapman, 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 Tim Graham, 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 Mac Chapman, 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 Tim Graham, 6 years ago

Has patch: set
Summary: Update Roboto fontUpdate Roboto font to v2.137
Triage Stage: AcceptedReady for checkin

Thanks, now I see the same.

comment:17 by Tim Graham <timograham@…>, 6 years ago

Resolution: fixed
Status: assignedclosed

In fb5dfd53:

Fixed #29832 -- Updated Roboto font to v2.137.

Note: See TracTickets for help on using tickets.
Back to Top