A sudden platinum upgrade raffle has appeared!
Donmai

Site-supported fonts for translators

Posted under Bugs & Features

BrokenEagle98
Intro

Currently fonts used for translations are pretty hit or miss depending on the device and operating system. This can drastically affect the presentation of the note to the user, compared to how the translator intended it to be seen. With issue #4212, fonts can now be supported by the site itself so that it's guaranteed that a font will work on every device.

Message

@ 'ing all of the major translators that use font-family:

@Moonspeaker @Paracite @Levander @Arcana55 @NNescio @Zurreak @BarefeetChaser @NWSiaCB @Nazdrovie

Status

The fonts that have been added to the site-supported list are:

Caveats

Any desired font to be supported must be free. The following quote from GitHub gives the reason why.

evazion said (Github comment):

I added a fallback font for Comic Sans. The other basic fonts (Arial / Verdana / Times New Roman) are already supported on most systems, either by the actual font itself or by a builtin equivalent (i.e. Android uses Noto Serif as a substitute for Times New Roman and Roboto as a substitute for Verdana). I'm using http://fontfamily.io to get this info.

The big problem here is that most fonts used in notes are under copyright. We can't distribute the font files ourselves without buying commercial licenses, which aren't that cheap. So for every font we want to support we have to find a free alternative that's close enough to the real thing.

Another restriction is that this will not be something that will be used to support hundreds of fonts. Supporting any font has a cost associated with it since each font has to be downloaded to every user's device.* Around 10 supported fonts would be a good ballpark figure for the maximum.

* Seems like fonts only get loaded on demand. https://stackoverflow.com/questions/9690214/only-load-font-face-being-used-in-that-page/9690795

Conclusion

So this is an opportunity to get desired fonts for translating which are guaranteed to work on any system, thus ensuring that a note gets displayed as intended by the translator.

Requirements

As a reminder, for a font to be site-supported, it must be:

  • Free
  • Not universally supported (http://fontfamily.io)
  • A maximum of around 10 supported fonts total
    • Though if a font is really needed it can always be added
Edit:
  • (2019-11-17)
    • Updated statements as fonts are only loaded as needed

Updated

Reply
Moonspeaker

BrokenEagle98 said:

Intro

Currently fonts used for translations are pretty hit or miss depending on the device and operating system. This can drastically affect the presentation of the note to the user, compared to how the translator intended it to be seen. With issue #4212, fonts can now be supported by the site itself so that it's guaranteed that a font will work on every device.

Message

@ 'ing all of the major translators that use font-family:

@Moonspeaker @Paracite @Levander @Arcana55 @NNescio @Zurreak @BarefeetChaser @NWSiaCB @Nazdrovie

Status

The fonts that have been added to the site-supported list are:

Caveats

Any desired font to be supported must be free. The following quote from GitHub gives the reason why.

Another restriction is that this will not be something that will be used to support hundreds of fonts. Supporting any font has a cost associated with it since each font has to be downloaded to every user's device. Around ten supported fonts would be the maximum I'm guessing.

Conclusion

So this is an opportunity to get desired fonts for translating which are guaranteed to work on any system, thus ensuring that a note gets displayed as intended by the translator.

Requirements

As a reminder, for a font to be site-supported, it must be:

In general, I stick to fonts listed as web-safe here, as they are apparently in wide enough use on different platforms that at least a fair majority of users will see them properly. The only one outside that list I use with any frequency is Arial Narrow, which is apparently not as widespread as Arial and Arial Black, to judge from its absence on the linked list. A quick web search shows that the font is available for free download, but I don't know if that's official or not.

Reply
kittey

Moonspeaker said:

In general, I stick to fonts listed as web-safe here, as they are apparently in wide enough use on different platforms that at least a fair majority of users will see them properly.

No Android/Linux compatibility listed, though. Most of those fonts are only available on Windows/Mac because Microsoft and Apple licensed them.

The only one outside that list I use with any frequency is Arial Narrow, which is apparently not as widespread as Arial and Arial Black, to judge from its absence on the linked list. A quick web search shows that the font is available for free download, but I don't know if that's official or not.

The whole Arial family is copyrighted and trademarked by Monotype, so whatever “free download” you found probably wasn’t legit. ;-) I like Single Sleeve as a free narrow comic font.

Blambot has a load of really nice comic fonts, but they require licensing for use as webfonts. Costs are 20-40 USD per font, so between one Gold and one Platinum user.

DaFont has a lot of free comic fonts to choose from. Maybe you guys can find something there.

For exclamations, a 100% free font that’s popular in scanlation is Yikes.
Since we can only choose 10 fonts, I’d rather have Komika Text instead of the Comic Sans MS-lookalike as a default comic font. (Props to Evazion for already replacing Comic Sans MS with Comic Relief, though.)

Reply
BrokenEagle98

kittey said:

Since we can only choose 10 fonts...

10 fonts isn't necessarily a hard and fast rule, it was just something I was guessing since I thought all fonts were loaded at once for every user. However it seems like they are actually only loaded on demand except for really ancient browsers like IE.

https://stackoverflow.com/questions/9690214/only-load-font-face-being-used-in-that-page/9690795

evazion said (Discord):

should be loaded on demand unless it's a really ancient browser
I still want to keep the font list relatively small though, I don't want to have to support a million different fonts

Still, 10 seems like a good ballpark figure, though that shouldn't limit us from getting fonts that we could really use.

For myself at least, I would like to have the following at my disposal:

  • A cursive handwriting-like font
    • like Segoe Script or Script
  • An blocky font
    • like Impact
  • A curvy font
    • like MV Boli
  • A comic-like font
    • already got Comic Sans MS
  • A code-like font
    • like System
  • A scary font
    • like Mistral
Reply
NWSiaCB

Yeah, I haven't been active in a while, but what I do is follow this set of web-safe font families so that even if they somehow don't have one of the most common fonts around, it defaults back to something else at least similar.

The one I use the most is impact, because it makes a good "super bold" font, with the occasional use of Times New Roman if I wanted to use a serif font if something was a bit more formal-looking and I also occasionally use Comic Sans to represent "wobbly" or scrawled text.

If we're putting in requests for broad outlines of what kind of fonts we can use, then those are the sorts of things I'd like to see:
1. A very thick, "blocky" font for things like the Akane-chan meme
2. A Comic Sans-like font for when the text is crude or hand-drawn to look rough
3. A scratchy and irregular font for when it's a really scribbly hand-drawn text. (Note that there's nearly-illegible text in the top panels then just rough hand-drawn text in the lower panel, so there's a reason to have a difference between just Comic Sans and something really scratchy)
4. Something with a serif or otherwise fancier than normal like a cursive family
5. Something with a "splatter" effect such as this

Reply
Moonspeaker

NWSiaCB said:

Yeah, I haven't been active in a while, but what I do is follow this set of web-safe font families so that even if they somehow don't have one of the most common fonts around, it defaults back to something else at least similar.

The one I use the most is impact, because it makes a good "super bold" font, with the occasional use of Times New Roman if I wanted to use a serif font if something was a bit more formal-looking and I also occasionally use Comic Sans to represent "wobbly" or scrawled text.

If we're putting in requests for broad outlines of what kind of fonts we can use, then those are the sorts of things I'd like to see:
1. A very thick, "blocky" font for things like the Akane-chan meme
2. A Comic Sans-like font for when the text is crude or hand-drawn to look rough
3. A scratchy and irregular font for when it's a really scribbly hand-drawn text. (Note that there's nearly-illegible text in the top panels then just rough hand-drawn text in the lower panel, so there's a reason to have a difference between just Comic Sans and something really scratchy)
4. Something with a serif or otherwise fancier than normal like a cursive family
5. Something with a "splatter" effect such as this

I would add a good sans serif narrow font, per my usage needs mentioned above. The font Kittey linked to is a good option, though I'd prefer something with proper upper and lower case, if feasible, since I tend to use it for titles rather than dialog lettering. (Most notes here are in mixed upper/lower case fonts anyway, as opposed to standard all-caps comic book lettering, so in terms of established translation note style, I don't view the "comic font" aspect as all that necessary, barring specialized cases.) DaFont's sans serif options extend for 91 pages, so I'm not going to give an exhaustive list, but the first 20 pages yield possibilities such as Steelfish, Steelfish Rounded, Libel Suit, Sturkopf Grotesk, Florence, Bluefish, and Shocking Headline. All of these are labeled either "100% free" or "Public Domain". There may be better ones, of course.

Naturally, approved fonts should include at least some useful symbols and diacritical marks, such as ´, ¯, ˜, ¨, ¥, £, ¡ and ¿, if at all possible. (Apologies if this is pointing out the obvious, but I do still encounter enough character-limited fonts that I feel it's worth mentioning.)

Reply
Zurreak

The vast majority of the time when I personally use fonts other than the default it's to reflect either handwritten or distinctly stylized text. I was aware that fonts didn't always display correctly depending on whether they were installed on the user's device, so up to this point I have limited myself to only fonts which are included with Windows. However, if we could get some fonts supported by the site itself that would create some new options, which is exciting!
I'll be going into (somewhat unnecessary) detail about which fonts I use most often and why. Most of the below parts of this comment can be skipped if one feels like it. I'm aware that other translators' selection and relative usage frequency of fonts can be different from my own, so I'm aware that there are other perspectives that need to be taken into account, but that's also the exact same reason why I wrote the explanation below. For the rest of this thread I will henceforth refer to "site-supported font" as "SSF"; plural "SSFs".

The font I currently use most often for handwriting is 'Segoe Print', which has certain advantages over the other Windows fonts which make it better-suited for most cases. However, I do have some issues with the font, so I'm not necessarily suggesting it as an SSF (although it looks like it's free, as far as I can tell). One of its advantages would also be greatly reduced in significance with the introduction of SSFs, which is the advantage of having a default font weight which is more appropriate for most cases. For example, the fonts 'Ink Free' and 'Chiller' both look very nice, but their default-weight characters can look skinnier than one would often want. This can be compensated for by emboldening the text in order to get the font to look more how you want it to, but the problem with this in the past was that if the font used was unsupported the resulting text would make it seem as if the speaker was shouting. SSFs would render this consideration unnecessary.

The other fonts I sometimes use for handwriting are 'MV Boli' (which is a bad font, but is sometimes accurate to the source material), 'Ink Free', 'Kristen ITC', and 'Bradley Hand ITC' (which is a little ugly, but so is some of the handwriting being translated).
There are also 2 stylized fonts I use fairly often. The first is 'Chiller', which is usually for intimidating or spooky text. It's a real nice font and it comes up often. The second is 'Forte', which is not as commonly useful and isn't as great.

'Segoe Print', 'MV Boli', 'Kristen ITC', and 'Bradley Hand ITC' are free as best as I can tell.
'Ink Free' has a license included with Windows, but does not seem to be available for purchase or download at all. The Windows license does not permit it to be hosted as a webfont as per this MS FAQ page.
'Chiller' and 'Forte' are unfortunately not even available for a single-time purchase, as explained here and here. They're available as webfonts only at a rate per quantity of pageviews. Purchased but unused pageviews expire after 4 years, so I can't imagine that any font using this payment model would ever be a good choice as an SSF under any circumstances.

I'll take a look at handwriting and stylized fonts with free licenses for use as a webfont and post my findings to this thread sometime in the future. It might take a while before I get around to this, though.

Updated

Reply
Zurreak

I support the variety of different font archetypes to be covered by the SSFs and the specific fonts suggested to fill each of these archetypes mentioned in BrokenEagle's post "forum #161001", but I would like to humbly suggest a change in the font chosen for the "Scary Font" archetype. Mistral is a script font (as in cursive). Script fonts are rarely visually the closest equivalent to the Asian handwriting or font used. They do still have appropriate use cases when it seems like an apt stylistic match, but not as often as non-script fonts as far as I've seen. I think a spooky SSF would be really useful to have, but I don't know that Mistral is the best choice. As I've mentioned, Chiller is also off the table. I'll keep an extra-attentive eye open for spooky fonts when I look for potential SSFs later. Does anyone have any other suggestions for a font to fulfill that archetype?

After writing the above paragraph, I felt it might create a false impression to bring up supporting BrokenEagle's suggested archetypes, but then not acknowledge NWSiaCB's suggested archetypes at all. I think those are also good.

Reply
Zurreak

Moonspeaker said:

I'd prefer something with proper upper and lower case ... Most notes here are in mixed upper/lower case fonts anyway, as opposed to standard all-caps comic book lettering, so in terms of established translation note style, I don't view the "comic font" aspect as all that necessary, barring specialized cases.

I agree with this. The drop-down boxes on this site have a different visual feel than hard translations do, so in my personal opinion I think some of the stylistic properties which lend to visually-appealing typesetting are less necessary for the soft translations on this site. I also especially agree with the need for clearly-distinguishable upper and lower cases in any SSF. I'm willing to go into greater detail on why I think it's important, but I won't unless someone disagrees.

Moonspeaker said:

(Apologies if this is pointing out the obvious...)

Thank you for bringing all of that up.

Reply
Moonspeaker

Zurreak said:

I support the variety of different font archetypes to be covered by the SSFs and the specific fonts suggested to fill each of these archetypes mentioned in BrokenEagle's post "forum #161001", but I would like to humbly suggest a change in the font chosen for the "Scary Font" archetype. Mistral is a script font (as in cursive). Script fonts are rarely visually the closest equivalent to the Asian handwriting or font used. They do still have appropriate use cases when it seems like an apt stylistic match, but not as often as non-script fonts as far as I've seen. I think a spooky SSF would be really useful to have, but I don't know that Mistral is the best choice. As I've mentioned, Chiller is also off the table. I'll keep an extra-attentive eye open for spooky fonts when I look for potential SSFs later. Does anyone have any other suggestions for a font to fulfill that archetype?

DaFont's ''Spooky'' font list seems predominantly populated by "free for personal use" fonts, and I don't know if that's good enough for SSF purposes. (I suppose the site could even amortize the cost of a "donationware" font if it's deemed feasible, which would increase the potential options, but I'm assuming it won't for now.) There are some "100% free"-designated fonts among the choices, though.

Reply
evazion

The following fonts have been added:

  • font-family: comic; - Comic Relief, a Comic Sans replacement.
  • font-family: narrow; - Archivo Narrow, an Arial Narrow replacement. Narrow and thin.
  • font-family: slab sans; - Anton, an Impact replacement. Narrow and thick.
  • font-family: slab serif; - Rokkitt, a Rockwell replacement. A blocky serif font. Sometimes used for comic titles.
  • font-family: formal serif; - Lora, a rounded, more formal serif font.
  • font-family: formal cursive; - Petit Formal Script, a fancy cursive font.
  • font-family: print; - Kalam, a neatly hand-printed font. Comparable to MV Boli. Suitable for neat handwriting or comics.
  • font-family: hand; - Indie Flower, a more casual handwritten font. Comparable to Segoe Print.
  • font-family: blackletter; - Unifraktur Maguntia, a Gothic / Germanic / Old English style font.

The following fonts have been aliased:

  • Comic Sans MS is now aliased to Comic Relief.
  • Arial Narrow is now aliased to Archivo Narrow.
  • Rockwell is now aliased to Rokkitt.
  • Impact is now aliased to Anton.

By aliased, I mean that if you use Impact you won't get Impact, you'll get Anton instead. This is so that these fonts look the same for all users. Please be aware that these fonts (except for Comic Relief) aren't exactly the same size as the old fonts, so linebreaks may be in different positions and sizing of text may be slightly different.

All fonts use logical names instead of actual font names, so be sure to use e.g. font-family: hand;. font-family: Indie Flower; won't work. This is so that these fonts can be changed in the future if necessary.

Fonts outside this list should not be used. Eventually non-standard fonts won't be allowed in notes. They'll either be aliased to other fonts or ignored. There are too many cases of translators using fonts that aren't supported or don't work as expected on all systems.

New fonts must be open source to be considered for the site. Look for fonts under the SIL Open Font License or something similar. We need fonts that give us the right to modify and distribute them, so we can host the files ourselves and distribute them along with the rest of Danbooru's code. Fonts that just say "free for personal use" without a clear license can't be used. Commercial fonts aren't an option either. Aside from the pricing (which is usually on a pay-per-pageview basis, not great for a high-traffic site like Danbooru), they normally don't allow you to host or distribute the font yourself. We went through this before with Font Awesome and moved away from it because of the problems it caused (issue #4058).

Reply
Claverhouse

evazion said:
...
New fonts must be open source to be considered for the site. Look for fonts under the SIL Open Font License or something similar. We need fonts that give us the right to modify and distribute them, so we can host the files ourselves and distribute them along with the rest of Danbooru's code. Fonts that just say "free for personal use" without a clear license can't be used. Commercial fonts aren't an option either. Aside from the pricing (which is usually on a pay-per-pageview basis, not great for a high-traffic site like Danbooru), they normally don't allow you to host or distribute the font yourself. We went through this before with Font Awesome and moved away from it because of the problems it caused (issue #4058).

Never really saw what the fuss was about with Font Awesome, just seemed yet another modernist set; plus I'm glad to reduce any overhead on the Web since half a page's weight is now javascript, advertisers and weird trackers. I got rid of Google Analytics once I understood a/ it means Google can monitor one from page to every page; and b/ most of the information is actually very unimportant.

I'd be averse to using anything from Google though, not because of tracking concerns, but since what Google giveth, Google snatches back. Google Graveyard

.

Whilst I begrudge no-one making a profit, the idea of paying for a font always struck me as ridiculous as paying for an operating system:

https://www.theleagueofmoveabletype.com/

http://www.losttype.com/about/

Reply
Arcana55

evazion said:

Fonts outside this list should not be used. Eventually non-standard fonts won't be allowed in notes. They'll either be aliased to other fonts or ignored.

Does this mean the generic font families (cursive, fantasy, monospace, serif and sans-serif) won't be allowed either?

Edit: Some of the new fonts at certain sizes disagree with the pop-up box size algorithm in regards to how big they are. The result is the pop-up box having horizontal and/or vertical scrollbars. For example, with print/Kalam, at font-size >= 200% or >= 21pt.

Edit^2: Just a personal observation: I really like Kalam. It works well for the loud, sharp SFX and excalmations that I usually use a fancy font for. I have one rather significant gripe though: the kerning between the exclamation point and question mark is too wide, so interrobangs frankly look poor. ?! is not as bad as !?, however. I found <span style="letter-spacing: -0.2em">!?</span> and <span style="letter-spacing: -0.1em">?!</span> to be an improvement.

Updated

Reply
BrokenEagle98

Arcana55 said:

Does this mean the generic font families (cursive, fantasy, monospace, serif and sans-serif) won't be allowed either?

From what I understood of the conversations on Discord, all of the generic font families will eventually be overwritten as well with one of the site-supplied fonts.

Reply
evazion

Zurreak said:

@evazion in forum #161211 you said, “Eventually non-standard fonts won't be allowed in notes.” However, as is mentioned in about:note fonts under the header “Multiple Fonts” it mentions that fallback fonts can be specified. Will people still be able to use non-standard fonts so long as they specify an SSF as a fallback or are there issues with that?

No, using non-standard fonts won't be allowed even if you provide a standard fallback. The goal is for all readers to have the same experience when reading notes. From what I've seen, most fonts used by translators are Windows-only. This is a big problem, because the majority of Danbooru users aren't on Windows. They're on mobile, either Android or iOS. None of the common Windows fonts work on mobile.

Fallbacks are a problem because they often don't match the first-choice font very well. In particular, text sizes can be totally different. This can ruin formatting when a translator expects text to be a certain size, but it's not because the user got a fallback.

Arcana55 said:

Does this mean the generic font families (cursive, fantasy, monospace, serif and sans-serif) won't be allowed either?

Serif, sans-serif, and monospace will be allowed. Fantasy won't be allowed, unless someone has a good replacement for it. Right now it has too much variability across devices. It's either Papyrus, Gabriola, Impact, or Serif, depending on your OS and browser. None of these fonts are remotely similar.

Cursive is a special problem. On Windows it's Comic Sans, but on Apple and Android it's an actual cursive font. We have several thousand notes using cursive to mean Comic Sans, which is totally broken on mobile. We need to either alias the cursive font to Comic Sans (which would be pretty counter-intuitive, and would cement a bad practice), or mass edit these notes to use Comic Sans, so that font-family: cursive can be used for an actual cursive font. My preference is for the latter.

Edit: Some of the new fonts at certain sizes disagree with the pop-up box size algorithm in regards to how big they are. The result is the pop-up box having horizontal and/or vertical scrollbars. For example, with print/Kalam, at font-size >= 200% or >= 21pt.

Edit^2: Just a personal observation: I really like Kalam. It works well for the loud, sharp SFX and excalmations that I usually use a fancy font for. I have one rather significant gripe though: the kerning between the exclamation point and question mark is too wide, so interrobangs frankly look poor. ?! is not as bad as !?, however. I found <span style="letter-spacing: -0.2em">!?</span> and <span style="letter-spacing: -0.1em">?!</span> to be an improvement.

The scrollbar thing is a known issue, I have an undeployed fix for it.

The source for Kalam is available at https://github.com/itfoundry/kalam, the kerning could potentially be fixed if there are any font-editing wizards among us. The issue I had when evaluating handwriting fonts is that most are too small to read at our default 14px font size. It's hard to find handwriting fonts that are both readable at the default size and that don't have other issues.

Reply
Zurreak

I have two potential candidates for the scary font.

The first is Anarchy. It's 100% free. It contains uppercase, lowercase, and basic punctuation. It does not contain a hyphen, accented letters, or special characters.
It has a good capital I, is easy to read, and is stylistically quite similar to the source's style on a lot of the posts I've used Chiller on in the past. I think it would make a good addition to the site.

The second is Frotten. It's 100% free. It contains uppercase, lowercase, basic punctuation, accented letters, and a variety of special characters.
It has a bad capital I, I think it's overstylized, and it most likely would rarely ever fit the source's style. On top of that it's not visually appealing and might be hard to read. I don't particularly like this font, but as one of the few passable 100% free "horror" fonts with a look similar to what we're going for I figured I might as well mention it.

Updated

Reply
BrokenEagle98

Zurreak said:

I have two potential candidates for the scary font.

The first is Anarchy...

The second is Frotten...

I checked out both fonts with regular and small-caps versions (font-variant:small-caps), with variations of bold and italic. The Anarchy one has a better set of lowercase letters for normal sentences, whereas the Rotten one has a better set of uppercase letters such as when using small-caps. The Anarchy one was also less cramped and had a nicer spacing between letters. Also, for myself at least, I can't think of when I'd need to use the special characters or other characters it's missing.

SO all-in-all, the Anarchy font does the best from those two, and would work well enough for my own needs.

For reference, the Anarchy font can be referenced using just font-family:Anarchy, whereas the Rotten one must be referenced as font-family:F-Rotten font

Reply
BrokenEagle98

Bumping this topic because there has been at least one more font type that would be useful for me but is currently lacking.

The font I'm thinking of is what is rendered when the generic font family "monospace" is used, which on my computer is Consolas, but could also be something like Courier; basically, something that looks robotic. This is useful for text boxes when robot-like speech needs to be emphasized. The current monospace will render differently on different computers/devices, so having something the site provides would help with sizing the font correctly (especially for embedded notes).

The following are a couple of fonts that I found which could work for that.

https://fonts.google.com/specimen/Share+Tech+Mono
https://www.dafont.com/aldo-the-apache.font
https://www.dafont.com/minecraft.font
https://www.dafont.com/pixelsplitter.font

-----------------------------------------------------

This also might be a time to review the current list of site fonts to see if any adjustments need to be made, or if any other styles of fonts could be used to enhance the translations. (About:Note Fonts)

Someone once brought up on Discord that the hand and print fonts were very similar, so maybe that's one potentiality for a fixup.

Note: For any font to be used by the site it must be 100% free or public domain, i.e. not just free for personal use.

Reply
1 2