Font path on WebFont.ru

Hello.

This will be a Friday small post on how our inner kitchen works, and just so that everyone understands what we are doing.

Introduction

Our project appeared a little over a year ago with 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 collected and launched. Now we have 266 fonts, the site has grown in functionality, instead of a snippet, there are plugins for editors, and even an extension for browsers.

In the first introductory article, we will describe all the steps that any font goes through before getting to your sites. And in subsequent articles we will describe the most interesting moments from these stages from the point of view 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 of them, and most recently we started publishing fonts containing only the Latin alphabet.

The search and selection itself begins with tracking the most popular sites and blogs that cover the design. For example: smashingmagazine.com , behance.net , creativebloq.com , etc. Something sensible can be found on social networks where hashtags help.

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

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

Conversion

While we use the most famous converter - fontsquirrel. Of all the existing converters, he proved to be the best. Yes, the “squirrel” is also not perfect, but in the current conditions none of us has the best alternatives. In general, all such services pretty much spoil the source font files. But we will have a separate article on testing converters and related problems.

Adding a font and system device

In May of this year, we finished writing our own engine. Our platform is django, and templating works almost completely on javascript.
The process of adding is reduced to indicating the name of the font (font-family), its styles (font-weight \ font-style), category and adding the author. After that, the server unloads all the information in one js file, which is then parsed on the client. Essentially, when a user switches categories, he simply filters out the fonts to display from this js file, without any additional requests to the server. Thanks to 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 sorted into shelves already in the plugins.

We plan to tell more about the device and how it works in our next articles.

Font storage and distribution

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

For downloading, we moved the archives to a separate domain, making the plugins and the site work independently from each other.

To demonstrate fonts on the site, we put them “next to” the site itself, and store and cache them using nginx.

For external connections, we use cloud storage. Because we don’t want to strain our server with eight millionrequests per month. In addition, while it does not cost us very much, the cloud itself also makes it possible 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 verify how the font looks on the site. In addition, we made downloading the font no less convenient and faster than connecting it.

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

In general terms, this is perhaps all about what is associated with the selection, publication and distribution of fonts with us. The following articles will be technical and practical.

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

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

Thank you for your attention and all a successful weekend. WebFont.ru
team .