Documentation for building otf font to use in browsers via CSS

[ghost]

This is a killer font for people who stare at code all day. However I'm desecrating and pulling my most embarrassing hairs trying to figure out the way around fontforge and your build scripts to build the font in OTF format ready to use from CSS/web browsers, for shenanigans the likes of highlight.js.

Please write some barebones documentation about the build process or point us the right way to help!

Thanks!

[mikebronner]

Hi @er-nun-vogelfrei-ist, have you tried creating the web versions of Monoisome using http://fontsquirrel.com? I just gave it a go, and they seem to compile for browsers, complete with CSS you can use to embed them.

@larsenwork Would this violate the SIL Open Font License?

[larsenwork]

@mikebronner no, OFL is a terrible license in my book - what most people doesn't realise is that there are two kinds of OFL one with and one without reserved font name.

Some designers unfortunately still use reserved font name.

OFL fonts with reserved font name can still be used for web font conversions as long as you rename the fonts in the process.

Monoid obviously doesn't use reserved font name.

@er-nun-vogelfrei-ist you can just open the sfdir in FontForge, File -> generate and choose OTF (not sure why you'd want it though - isn't woff, woff2 + ttf (+ maybe IE format) enough to get going these days?

[ghost]

@mikebronner @larsenwork Thank you for the feedback. I built the fonts successfully, although I'm not a fan of docker by any stretch of the word. Fontsquirrel also allowed me to generate the correct files and converted fonts. However there's a catch: they strip away all the Chinese/non-western glyphs. Is this to be expected?

[mikebronner]

@er-nun-vogelfrei-ist, I found that choosing the "Expert" option in FontSquirrel, and choose "No Subsetting". In testing that seemed to work. Can you give that a try and let us know?

[ghost]

@mikebronner Those settings result in a non-working font for me. Trying the generated -demo files will show how it reverts to whichever font is 'default' in your system. Weird. I had a working configuration before, will dig for the generator settings shortly.

EDIT: How should the Retina found be used? Can it be conditionally loaded?

[mikebronner]

In this example I only used the Monoisome font, and it seems to work fine in Safari (I deleted the other Monoid fonts on my system before testing). You can add additional fonts by converting them individually in the generator, then adding all the CSS and font-files to your web site (that is going more into web development, and probably beyond the scope here).

[ghost]

OK, caveat emptor: selecting a different CSS filename breaks their demo files. They don't account for that, so they don't load the CSS. My bad. Seems it's working for now.

This is my generator file:

# Font Squirrel Font-face Generator Configuration File
# Upload this file to the generator to recreate the settings
# you used to create these fonts.

{"mode":"expert","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"keep","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"none","subset_range":["lowercase","uppercase","numbers","punctuation","currency","typographics","math","altpunctuation","accentedlower","accentedupper","diacriticals","albanian","bosnian","catalan","croatian","cyrillic","czech","danish","dutch","english","esperanto","estonian","faroese","french","german","greek","hebrew","hungarian","icelandic","italian","latvian","lithuanian","malagasy","maltese","norwegian","polish","portuguese","romanian","serbian","slovak","slovenian","spanish","swedish","turkish","ubasic","ulatin1","ucurrency","upunctuation","ulatina","ulatinb","ulatinaddl"],"subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","style_link":"Y","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0","rememberme":"Y"}

[larsenwork]

We could easily add info about webfont conversions but that's more a "general subject". You can already find a plethora of articles/tutorials about online and I'd rather we keep the readme short and focused so I don't think we'll be adding it to the readme.