Genstyl — Design System tool | Importing custom fonts
#DesignSystems #UIDesign #UIUX #FrontEnd #Typography #Fonts #WebDesign
👇🏻 Waitlist
https://genstyl.ovidiu.works/?utm_sou...
One of the many things I wanted to automate in my own Front-End workflow was setting up the custom fonts for the project.
This meant:
sourcing the fonts either from the designer or, if the fonts were free, from public GitHub repositories or other 3rd party font provider websites;
Converting the files to WOFF2 format, if they weren’t already;
Importing provided CSS declarations or, if these weren’t bundled with the font files, writing them manually; etc.
This isn't a lot of work, but it felt like time could be saved and mistakes avoided by automating it.
Setting up fonts is already part of a designer's natural workflow. If they're going through font pairing, picking weights and variants, why not piggyback on that effort? ;)
Once you set up your fonts, they are saved in Genstyl and ready to use for all your projects. When you export, the system will check the list of fonts used in your project’s layouts, copy the required font family files as part of the exported bundle and write the CSS declarations for them!
TTF files are converted to WOFF2. Some font files have embedded metadata, so Genstyl will try to pre-populate the Font name field for you. It will also attempt to set up the weight/italic combo, although that also depends on the files. It does its best, but if it needs your help you’ll get the prompt.
One other milestone on Genstyl’s roadmap is working on 3rd party integrations (e.g. Google fonts, Bunny fonts, etc.). I’m also thinking that the ability to define a local or system font (something you already have installed on your machine) is quite useful, although that won’t output anything but the font name in the CSS. Still, for quick experimentations I think it’s worth it.
Like everything else in Genstyl, fonts are referenced by id, so when you edit them later, the Primitives defined in your Styles will remain linked, stable and reliable.