Page MenuHomePhabricator

Deploy Gochi Hand typeface at euwiki
Closed, ResolvedPublic

Description

Hello,
It seems that loading fonts from CDN is forbidden (T209998), but the typeface Gochi Hand (OFL) is part of the visual identity of Txikipedia, the Encyclopedia for kids inside euwiki. If it is not possible to load it using CDN, can it be deployed directly into the project so we can call it without (possible) privacy issues?

Event Timeline

Theklan created this task.Jul 24 2020, 9:19 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 24 2020, 9:19 PM

It's unclear to me if this falls under UniversalLanguageSelector per https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector#Adding_fonts (which includes steps how you could create a patch yourself which adds that font), or if this is SRE territory as per e.g. T180924 (though that's for fonts in SVG files). Which is one reason why I filed T228591.

Let's see if someone can handle this, as visitors are reading the text with Comic Sans (suboptimal solution). Thanks!

Change 625664 had a related patch set uploaded (by Reedy; owner: Reedy):
[mediawiki/extensions/UniversalLanguageSelector@master] Add GochiHand font

https://gerrit.wikimedia.org/r/625664

Reedy changed the task status from Open to Stalled.Sep 14 2020, 11:45 PM
Reedy added a subscriber: Reedy.

Marking stalled per CR comments and waiting for a reply from the authors of the font...

Reedy changed the task status from Stalled to Open.Sep 15 2020, 11:44 AM

https://github.com/huertatipografica/gochi-hand has been created and should be enough to mostly unblock this request

https://github.com/huertatipografica/gochi-hand has been created and should be enough to mostly unblock this request

Patch is updated with woff and woff2 formats

woff and woff2 files upstreamed back via https://github.com/huertatipografica/gochi-hand/pull/1

Change 625664 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Add GochiHand font

https://gerrit.wikimedia.org/r/625664

Reedy closed this task as Resolved.Sep 21 2020, 1:13 PM
Reedy claimed this task.
Theklan reopened this task as Open.Dec 3 2020, 9:16 AM

This is claimed as resolved, but I have tried various computers that don't have this font installed and the typeface shown is Comic sans. Is there a problem with css?

Reedy added a comment.Dec 3 2020, 1:44 PM

This is claimed as resolved, but I have tried various computers that don't have this font installed and the typeface shown is Comic sans. Is there a problem with css?

https://eu.wikipedia.org/wiki/MediaWiki:Common.css

Probably. It being in ULS doesn't make it magically get loaded

https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts

I'm not quite sure on best practice, but you can use the URLs below to tell the browser where to find it, using @font-face etc; presumably like you did previously from tools

https://eu.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff
https://eu.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2
https://eu.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.ttf

Untested:

@font-face {
  font-family: 'GochiHand';
  src: local('GochiHand') url(https://eu.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2) format('woff2');
}
Theklan closed this task as Resolved.Dec 3 2020, 2:50 PM

It seems that the correct code was:

@font-face {
  font-family: 'GochiHand';
  src: url(https://eu.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}

Thanks!

Reedy added a comment.Dec 3 2020, 2:57 PM

You will probably want the local() (to tell it to use the font locally if it exists

And the format() to give the browser the hint about the type...

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Somehow, the local() wasn't working. So I get rid of it and now it is working. I have added woff2, woff and ttf formats. Thanks!