Skip to content

MuTsunTsai/fontfreeze

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FontFreeze

GitHub package.json version GitHub Repo stars Copyright

Freeze variations and features in font.

Introduction

Modern OpenType fonts support variations and features that allow customizable fonts. The problem is that not all environments support these mechanisms. IDEs such as Visual Studio only support choosing font family and font size, without any options to select variants or toggle features. FontFreeze is a tool that allows you to create a customized instance of a given font, so that you may use exactly the font you want in those environments.

How to use it

Simply visit https://mutsuntsai.github.io/fontfreeze to launch the app, no installation required!

As you open a .ttf file, it will show you the font info and the available options. You can then select a particular variant (for variable fonts) by selecting one of the predefined instances, or customize each variable axis. You can also select features you want to activate (or deactivate) from the feature list:

  • For the meaning of each feature, look up the user manual of your font. In most cases, the feature you are looking for will be among cv01-cv99, ss01-ss20, zero, onum, etc.
  • Most coding fonts have their coding ligatures defined in the calt feature. If you want to completely disable ligatures, deactivating calt will usually do the trick.
  • Leaving a feature blank means keeping its default behavior (which may or may not be activated depending on the environment).

You can also remove some of the glyphs by entering those characters in the Remove glyphs. This is useful when you want those characters to fallback to other fonts.

Finally, click Generate font! to generate your font. It's that simple!

Tips:

  • Whenever possible, use a non-variable version of the font as starting point, as it will likely give better hinting than the variable one.
  • The preview text is editable. You can put any sample source code in it to preview the result.
  • If you have multiple screens with different DPIs, preview on each of them to make sure the result is perfect.
  • You can now also export to WOFF2 format and use the font on web!

How it works

FontFreeze uses fonttools, a Python library for manipulating fonts. In then utilizes Pyodide to run Python code directly in your browser through WebAssembly, so it's purely front-end and nothing is stored in the back-end. The UI part is built with petite-vue and Bootstrap.

The way FontFreeze deactivates a feature is by removing all lookups inside it, and it activates a feature by moving all lookups in it into calt, which is usually activated by default in most environments. If this doesn't work for a particular environment, you may also try changing the "Target feature for activation" setting to rvrn (which is more forced than calt by the OpenType specification; note that in this case, you might also need to activate calt as well for some other features to function).

Since version 1.3, in addition to the said approach, there is also an option to apply actual glyph substitution for single-glyph features (which is on by default) for maximal compatibility across different environments.

Acknowledgment

FontFreeze is especially inspired by the project vfit, and I used many parts of the source code from it. Other projects that inspired FontFreeze include:

The "FontFreeze" banner is generated using Text Generator.