Myfffonts

My own private libre webfonts vault (myfffonts might stand for My Formidable Free Fonts).

Myfffonts is a local-first, browser-based webfonts manager that lets you quickly browse and try out the wonderful free/libre (or even not so free) fonts you’ve patiently collected.

Warning

This software is free software and comes without any warranty. It’s provided ​“AS IS” (aka works for me most of the time). It might be broken at some points, and is poorly documented.

Goal

Geared towards a web-only use of fonts, myfffonts is primarily dedicated to be run on localhost. An online demo can be found on myfffonts.accentgrave.net.

The app allows to browse fonts by tags, test different sizes, weights or styles, text configurations and variable axes, and allow to download a font pack, ready to unzip into a web project.

When authenticated, a form allows to quickly setup a new font, upload files and create proper css, for static or variable fonts. Dropping fonts anywhere show up the form where font info is gathered via opentype.js –that might fail sometimes.

Installation & usage

Runs as a web page/app under PHP 8.

# go to /var/www, /Applications/MAMP/htdocs, or wherever is your always-running local server 
git clone https://codeberg.org/julienbidoret/myfffonts.git

Runing php dev server (php -S localhost:8000) is not supported (it wouldn’t allow loging-ing or uploading files).

When you first visit the app, it will ask for login creation. You can choose to keep your vault private (might be useful on public servers) to restrict access with login / password.

Tips & tricks

Drag and drop font files on the page to store a new font (yout should be authenticated).
Font info is sniffed from the font itself, and prefills the data to be stored.

When creating a new font, take the time to properly set the font details and CSS: there is no way to edit font data from the webpage (you can manually edit the font.yml file within the font directory). Within this font.yml file, a specific demo text can be set, that will be used in the font specimen.

→ When in trouble, WakamaiFondue if a great aid for digging within variable fonts. Also, transfonter and many other services produces webfonts with an associated CSS file, almost ready to be copy/pasted.

Caveats

A naïve lazy loading of fonts is setup, but one font after the other, note that the page loads a lot of resources (even if dealing with huge collections is not the point of this app).

Even if the URL of the font project / page is present and accessible on download, the immediate download of fonts packs is not so nice with font designers and foundries (who built wonderful websites to showcase their creeations). Myfffonts should then primarily be used to set up a personal font vault, and not a public / online one.

→ Be kind with our free foundries: link them back in your projects, and think about donations!

Credits and libraries

Design and development by Julien Bidoret, relying on Spyc by Vlad Andersen and contributors (MIT License), a quite simple PHP upload script, Codemirror (MIT License), opentype.js and wawoff2.

CommitMono by Eigil Nikolajsen (SIL Open Font License) is the UI typeface

Heavily inspired by Raphaël’s Use & modify or Luuse’s typotheque.

Licence

Licensed on GNU AFFERO GENERAL PUBLIC LICENSE, a free, copyleft license, based on the GNU GPL version 3.

If you run a modified version on a server and let other users communicate with it there, your server must also allow them to download the source code corresponding to the modified version running there.

Overview

Main view

Main view, with “monospace” filter active and “grid view” active

Detail view of a font (here, a variable one, with its axes)

Detail view of a font with paragraph (¶) toggle unchecked, showing a random (French) word

When adding a font, info is guessed from the font data and CSS is generated on the fly. Overwrite default data as needed, with custom URL, tags…

Alphabet view

Uppercase view

Custom text view

First visit invite to create a login/password