Font path on WebFont.ru

Hello.



It will be a Friday small post about how the internal kitchen works for us, and just for everyone to understand what we are doing.

Introduction

Our project appeared a little over a year ago from the fact that it was necessary to somehow simplify the receipt of fonts by developers. Then the first snippet was written, about two dozen fonts were assembled and launched. Now we have 266 fonts, the site has acquired functionality, instead of a snippet, there are plugins for editors, and there is even an extension for browsers.

')

In the first introductory article, we describe all the stages through which any font passes before getting to your sites. And in subsequent articles we will paint the most interesting moments from these stages in terms of development and practical application.

Font selection

It's no secret that there are very few free fonts that support the Cyrillic alphabet, but we still managed to collect about two hundred such ones, and more recently we started publishing fonts containing only Latin characters.



Self searching and selection begins with tracking the most popular sites and blogs that cover design. For example: smashingmagazine.com , behance.net , creativebloq.com , etc. Something sensible can be found in social networks in which hashtags help.



After the font is found, it is tested for free. If a license is not attached to it, then we check its availability in paid directories or we are looking for the author’s website, which you can certainly see for yourself. The vast majority of fonts hosted with us are distributed under the OFL and Creative Commons licenses . However, some authors do not consider it necessary to follow generally accepted licenses and simply write their own terms, which we also follow. For example, we do not publish fonts where the author indicates “free for personal use” or explicitly prohibits their distribution to other resources. But yesterday we had the first time when we contacted the author of the font and received consent to publish his work with us. Such an exclusive turned out. There are also fonts, the so-called freeware - which failed to establish neither the author nor the free. We publish them too, but at any time we can remove them at the first request of the copyright holder.



As for the quality selection, then everything is simple. Cyrillic, due to its limited number, we publish the whole, we select the Latin alphabet more carefully. For example, we look at the completeness of the outlines in the family, the display of the font in browsers and look back at the relevance and current trends.

Conversion

While we use the most famous converter - fontsquirrel. Of all the existing converters, it was he who showed himself the best. Yes, and "protein" is also not perfect, but in the current environment, none of us have better alternatives. In general, all such services considerably spoil the source files of fonts. But we will have a separate article about testing converters and related problems.

Adding font and device system

In May of this year we finished writing our engine. Our platform is django, and templating works almost entirely in javascript.

The process of adding is reduced to specifying the font name (font-family), its outlines (font-weight \ font-style), categories and adding the author. After that, the server uploads all the information into a single js-file, which is then parsed on the client. In fact, when a user switches categories, he simply filters out fonts to display from this js-file, without additional requests to the server. Because of this, the switchings are incredibly fast. Font search is tied to the same js file.



For plugins, due to their specificity and for unification purposes, we use a json file that is generated by the server and is already parsed in plugins.



In more detail about the device and how it works, we plan to tell in our next articles.

Font Storage and Distribution

All fonts are stored in two types (archives / files) and in three places.



For download, we transferred the archives to a separate domain, making the plug-ins and the site independent of each other.



To demonstrate the fonts on the site, we add them “side by side” with the site itself, and store and cache them using nginx.



For external connection we use cloud storage. Because we do not want to strain our server with eight million requests per month. In addition, while it costs us not very expensive, and the cloud itself also allows you to cache font files and collect statistics. Immediately pay attention to the fact that we are not Google Fonts and do not recommend connecting fonts directly from us for long-term use. Imports are more likely to test and test how the font looks on the site. In addition, we made the downloading of the font at least as convenient and fast as connecting it.



With the help of all these manipulations, we solved the problem of load distribution and reduced our costs.



In general, this is probably all about what is connected with the selection, publication and distribution of fonts with us. The following articles will be of a technical and practical sense.



Finally, we have prepared one interesting discovery. Everyone says that Google Fonts allows you to optimize the speed of loading fonts by manipulating character sets. For example, if you connect only Latin, then the font file will weigh less and load faster. However, exactly in Latin it ends. If you connect only the Cyrillic alphabet, then you will receive a Latin letter as a “bonus”. We do not know whether it has always been and will continue, but for now this is a fact. You can check here .



upd Mithgol has previously published this and told how to get around: habrahabr.ru/post/130172



Thank you for your attention and all the good weekend.

Team WebFont.ru .