Web fonts at the crossroads
The translation does not claim to be 100% accurate, but I tried to convey the author’s thoughts and syllables as accurately as possible. Comments are welcome.
Starting from Internet Explorer 4 in 1998, and then from March 2008 to March 2010, one after another, all the “big five” desktop browsers - Safari, Firefox, Opera and Chrome - rolled out relatively similar implementations of the rule
First, a review of recent events:
Now go through the points ...
')
WOFF was officially added to the W3C Fonts Working Group on April 8th, 2010. Microsoft unexpectedly sponsored his contribution along with Opera and Mozilla. WOFF support is stated in the IE9 test builds for developers. WOFF will be the standard “transport” for fonts. WOFF support is already implemented in Firefox 3.6+, and Chrome developers announced support for WOFF in the near future.
Unfortunately, WOFF has been touted in ways that can be misleading. Let's stop for a second, as it is important to know what WOFF is and what is no less important than it is not.
Like its older brother, EOT (Embedded Open Type), the WOFF file is essentially an archived font file. It is not a font format in and of itself. This is a font file that is “collected on the road.” Both PNG and JPEG for BMP and TIFF, and WOFF for TTF and OTF. (Unlike a compressed image, the original font can and must be unpacked from compression.) In practice, WOFF and EOT are very similar and the compression ratios for them are more or less the same.
WOFF is not a magic font format that once and for all breaks all obstacles to the licensing of commercial fonts. Fears of font manufacturers regarding the web are much more complex and we will soon deal with them in connection with FHOS.
IE9 uses the Windows DirectWrite API to render fonts. If you haven’t downloaded the preview version of IE9 yet, I recommend you try it, it can encourage you. After spending some time with IE9 preview, you don’t want to go back to IE8 and XP. (Mac users, don't laugh.) Drawing fonts in IE9 is much more than we expected. Undoubtedly on par with Mac, and in some cases even better. Whatever your opinion, the difference is reduced significantly. One of the great side effects of focusing on web fonts was to focus on how the desire to render fonts in Windows browsers is compared to that in browsers on OS X. Note that DirectWrite is a Windows API, and not specific to IE, and other browsers like Firefox also implement it.
Surprisingly, what makes
Here are the main changes:
In addition to TrueType (TTF) fonts, IE9 will support PostScript-flavored OTF CFF fonts, as well as the “big five” browsers. Removing this compatibility barrier is in itself very good, but with a warning: only if in the interest of backward compatibility for IE 6–8, it will happen several years before the web fonts are no longer TrueType. IE 6–8 will only support TrueType fonts packaged as EOT. In addition, there are other problems drawing in browsers under Windows, which must be remembered.
It is hoped that the font designers will help in this by creating their own fonts available in TrueType with adequate TrueType hinting . Or, as one font designer suggested to me quite seriously, everyone should refrain from using web fonts until IE8 leaves the stage. Ha! It's too late .
Inside the
Note that the
In IE6–8, the
Necessary tools that web authors should have:
Generator is a set of online tools offering conversion, cleaning, generating CSS styles, and so on. At the moment, this is the best thing on the net and in the hands of the font designer and web developer Ethan Dunham is just continuing to improve.
In addition, you may want to familiarize yourself with some free utilities that are used behind the scenes in places like Font Squirrel, Kernest and Google:
Developed by me and Phillip Taylor from Cambridge, EOTFAST is a free and easy to use alternative to the Microsoft Converter, WEFT . Use EOTFAST to create natively compressed EOT files that are compatible with IE 6–8 and faster page load. Please note that the EOT format was not recognized as non-recommended and will continue to work in all rendering modes in IE9, thus creating an easy way to work with all versions of IE without resorting to conditional comments.
Trust licenses — wholesale price fonts, which are provided as TTF or OTF-installable files to simplify development, as well as publishing on web servers — are available in Font Spring . This site provides, as each similar site would have, font samples, so you actually see the product before you buy it. I hope other similar services will take this simple licensing model as a basis.
Before the advent of
The concerns of the creators of commercial fonts are much deeper than the scenario of a situation when a site visitor sees the font he likes, digs into CSS and downloads it. Let me offer an explanation so you can better understand why there are font services that use “disguise,” and in some cases complicated and stupid licensing agreements.
Font makers have seen what happened to the music, books, newspapers, magazines, and image banks, and they fear the same thing will happen to them. This is called iTunes Effect , and it's about price.
Font designers are still very focused on the print . In general, the main money is in servicing professional clients in the printing industry: books, magazines, decoration, and so on. Prices usually vary depending on the number of users of the product. Their main fear is that as soon as the fonts appear on the network, they will become a consumer product, the existing business model will collapse and the fonts will depreciate. Font designers are afraid that they will not be able to request, say, $ 420 for four font families for 6-10 users, in a world where fonts are provided on sites for a “conditional” unlimited number of visitors who do not have to pay anything for it. What if the Internet lowers prices in the print sector and by itself does not actually generate revenue?
In response to the “Internet threat”, some commercial font designers have chosen font stores and “masking” services. Essentially, these services use the Amazon Kindle model, but instead of books, you get what the books are made of - fonts. They are distributed in a measured, controlled way so that the font makers take where each font goes and by whom it is used. Masking focuses on preventing normal downloads and the ability to create fonts installed in the operating system, and therefore the font is not available for use in programs such as InDesign. The main task of such services is to keep font families in their hands.
The increase in discussions between font vendor representatives such as Microsoft, Adobe, Monotype Imaging and others, due to the appearance of Typekit last year, in recent months has led to the creation of such masking services as Microsoft's font distribution proxy, Ascender Corp , Extensis ( software specialists). management and licensing of fonts), Monotype Imaging , and the team , including the Font Bureau from David Berlow .
I can tell you that the guys from Extensis, Ascender and Monotype are happy and enthusiastic about providing fonts for the web. But they certainly will not be in a hurry to tell you that the distribution system of these fonts is created within the limitations of a smart, but “ dirty ” DRM-like structure . It's clear. But attempts to identify and prevent cases of unlicensed distribution through code have proven to be inexpedient for virtually everyone and in the long run, all attempts to disguise fonts look futile and inappropriate.
Font designer Ray Larabie expressed it the best :
Protecting fonts from being installed into the operating system, while using fonts anywhere other than the web, a sign of retrograde, looks ridiculous and stupid. Install fonts in your OS? Yes, please, grandpa! In the near future, no one will want to install the font in the operating system.
As usual, there is a downside. You can consider FHOS as a phase. Services are updated all the time. For example, the WebINK service from Extensis is a free installable “preview wizard” of the Type Drawer fonts, which allows, among other things, to instantly change certain fonts on a page by simply dragging them. This saves a lot of time and this is what designers need in their work. At the moment, this is a proprietary development of WebINK, but it forms the direction of development of services.
As for me, I focus on providing information for developers . And as a web author, now that I do not have to rely on the operating system in terms of fonts, except as a reserve, I feel uncomfortable with the idea that such a basic and fundamental part of the design of my site as a font will be controlled by external the essence. Further, not a single independent web designer with whom I have spoken about this, under any circumstances, agrees to clamp the client with a constant expense on fonts. There are thousands of free fonts and many of them are of the same quality or even higher than those offered by FHOS services .
Needless to say, you should know at a minimum what technological differences there are between what the service provides and what you can do if you keep the files at home. Under the influence of the checklist recently proposed by EFF in connection with the explosion of digitized books , here is a variant of the checklist of consumer FHOS services:
Comments are welcome.
From the moment Mozilla’s John Daggett heads up the CSS3 Fonts Module, an impressive team of invited experts in typography design ponders the problems of advanced typography in the W3C. Already in the near future this can have a big impact on the display of mathematical symbols and non-Latin languages .
It has already been several years since the release of the iPhone, and flash on it is still not allowed. Like the iPad. The recent saying of Steve Jobs has attracted a lot of attention and it's hard to imagine that Apple will back down on this issue. Plus, the iPhone and iPad support a much simpler and more elegant alternative to drawing fonts using SVG -
Thanks to an unexpected development that sprang from informal conversations with guys from Typekit , Google became a provider of freely licensed fonts through the Google Ajax API . This is an open-source project in which you can find documentation, examples and information on how you can contribute to its development in the GitHub repository . Unlike many open-source projects, it has a permanent curator Raph Levien .
And now let's get completely confused: for IE 6–8, you can only use TTF fonts wrapped as EOT or EOT “Lite” (uncompressed). For Firefox, Opera, Chrome, and Safari, you can use TTF or OTF files as “raw” or in some cases wrapped in WOFF files or as a data URI inside the style file.SVG is going to be the primary format for fonts, but its main virtue today is support in a mobile Safari for iPhone and iPad.
Yes, it is confusing. At first. There are always big changes. But I expect web authors to do what they always do. Find a way to make it all work. Raw materials here and here . Tools here and here . Solutions here and here . So put together a few pages of examples and templates , and get ready for a mess. The time has come.
With the permission Translated of A Magazine Apart List and the author [s].
Starting from Internet Explorer 4 in 1998, and then from March 2008 to March 2010, one after another, all the “big five” desktop browsers - Safari, Firefox, Opera and Chrome - rolled out relatively similar implementations of the rule
@font-face to bind fonts. At the same time, an integral part of the web-publishing puzzle, a part that is missing from the beginning of the Web, has fallen into place and now the real, web-oriented typography is beginning to take shape.First, a review of recent events:
- On March 18th, 2010, the Web Fonts Working Group was established at the W3C. Its first task was to approve the WOFF specification as a delivery standard for sfnt (OTF and TTF) fonts to the web in a “compressed” form.
- Fonts were rendered in IE9 using Windows's DirectWrite in the IE9 Platform Preview .
- The first tools for preparing web fonts appeared, such as Font Squirrel's @ Font-Face Generator and EOTFAST .
- A new wave of “font storages” was launched in the form of Typekit , Typotheque and free, open- source Kernest .
- The first “trust / credit” licenses for web fonts from commercial font designers appeared.
- The CSS3 Fonts Module includes some of the advanced features of OpenType.
- Adobe Flash, the once-reliable, cross-platform text replacement environment (sIFR), now looks completely squalid.
- Google launched a free font service with a growing library . All fonts in the library are also available for private storage / use.
Now go through the points ...
')
WOFF
WOFF was officially added to the W3C Fonts Working Group on April 8th, 2010. Microsoft unexpectedly sponsored his contribution along with Opera and Mozilla. WOFF support is stated in the IE9 test builds for developers. WOFF will be the standard “transport” for fonts. WOFF support is already implemented in Firefox 3.6+, and Chrome developers announced support for WOFF in the near future.
Unfortunately, WOFF has been touted in ways that can be misleading. Let's stop for a second, as it is important to know what WOFF is and what is no less important than it is not.
Like its older brother, EOT (Embedded Open Type), the WOFF file is essentially an archived font file. It is not a font format in and of itself. This is a font file that is “collected on the road.” Both PNG and JPEG for BMP and TIFF, and WOFF for TTF and OTF. (Unlike a compressed image, the original font can and must be unpacked from compression.) In practice, WOFF and EOT are very similar and the compression ratios for them are more or less the same.
WOFF is not a magic font format that once and for all breaks all obstacles to the licensing of commercial fonts. Fears of font manufacturers regarding the web are much more complex and we will soon deal with them in connection with FHOS.
IE9 and DirectWrite
IE9 uses the Windows DirectWrite API to render fonts. If you haven’t downloaded the preview version of IE9 yet, I recommend you try it, it can encourage you. After spending some time with IE9 preview, you don’t want to go back to IE8 and XP. (Mac users, don't laugh.) Drawing fonts in IE9 is much more than we expected. Undoubtedly on par with Mac, and in some cases even better. Whatever your opinion, the difference is reduced significantly. One of the great side effects of focusing on web fonts was to focus on how the desire to render fonts in Windows browsers is compared to that in browsers on OS X. Note that DirectWrite is a Windows API, and not specific to IE, and other browsers like Firefox also implement it.
IE9 and @ Font-Face with CSS3
Surprisingly, what makes
@font-face suitable cross-browser solution today is that IE has been supporting @font-face for more than ten years. However, IE9 will be the first implementation of @font-face as described in the CSS3 specification.Here are the main changes:
Font formats
In addition to TrueType (TTF) fonts, IE9 will support PostScript-flavored OTF CFF fonts, as well as the “big five” browsers. Removing this compatibility barrier is in itself very good, but with a warning: only if in the interest of backward compatibility for IE 6–8, it will happen several years before the web fonts are no longer TrueType. IE 6–8 will only support TrueType fonts packaged as EOT. In addition, there are other problems drawing in browsers under Windows, which must be remembered.
It is hoped that the font designers will help in this by creating their own fonts available in TrueType with adequate TrueType hinting . Or, as one font designer suggested to me quite seriously, everyone should refrain from using web fonts until IE8 leaves the stage. Ha! It's too late .
Syntax
Inside the
@font-face “declaration” in CSS3, you, as a web author, have to do what operating systems do for you with “safe” fonts. You must group the fonts into families, declaring them under the same family name. You must separate the members of this family, declaring for each of them to be a different combination of font-style (normal, italic) and font-weight (normal, bold) .Note that the
font-weight and font-style selectors have different values inside the @font-face rules from the same selectors outside the rule in the main style sheet. Inside the declaration, font-weight: bold means “this is a bold part of this font family;” outside the font-weight: bold declaration means “apply boldness to this text, with the help of a member of this font family who is declared as bold.”In IE6–8, the
@font-face works in the same way. However, in order for EOT files to work properly, some of the names and descriptive information inside the TTF file from which the EOT was created must match the CSS declaration. In most cases, this is not a problem. But sometimes, some fields inside the font data tables need to be changed. If necessary, all problems are studied and can be easily corrected. (Details in the documentation for EOTFAST .)Toolkit for Web Fonts
Necessary tools that web authors should have:
Font Squirrel Generator
Generator is a set of online tools offering conversion, cleaning, generating CSS styles, and so on. At the moment, this is the best thing on the net and in the hands of the font designer and web developer Ethan Dunham is just continuing to improve.
In addition, you may want to familiarize yourself with some free utilities that are used behind the scenes in places like Font Squirrel, Kernest and Google:
- FontForge is a full-fledged font editor with all sorts of configurable goodies on the server side. Open source.
- sfnt2woff is an open source toolkit for packaging TTF and OTF CFF fonts in WOFF files.
- ttf2eot is the predecessor of EOTFAST. It creates uncompressed "light" EOT files.
- TTX is a tool to convert OpenType and TrueType fonts to and from XML.
- Fontue is an open source engine for rendering web fonts and scripts to handle fonts. Contributions to Github are welcome.
- WebFont Loader is a JavaScript library that allows you to better control font loading than Google Font API allows. Created in collaboration between Google and TypeKit.
EOTFAST
Developed by me and Phillip Taylor from Cambridge, EOTFAST is a free and easy to use alternative to the Microsoft Converter, WEFT . Use EOTFAST to create natively compressed EOT files that are compatible with IE 6–8 and faster page load. Please note that the EOT format was not recognized as non-recommended and will continue to work in all rendering modes in IE9, thus creating an easy way to work with all versions of IE without resorting to conditional comments.
Trust licenses
Trust licenses — wholesale price fonts, which are provided as TTF or OTF-installable files to simplify development, as well as publishing on web servers — are available in Font Spring . This site provides, as each similar site would have, font samples, so you actually see the product before you buy it. I hope other similar services will take this simple licensing model as a basis.
Font storages and “masking” services (FHOS)
Before the advent of
@font-face , browsers relied on operating systems for the fonts issue, so the unlicensed use of these on sites was not a problem. Operating systems were not only a technological basis, but also a legislative one. The rights to use "secure" fonts for the web came with the operating system. But @font-face bypasses operating systems, as fonts come from the web server. The creators of commercial fonts are facing the prospect of losing control and completely new legal realities. In addition, there is the prospect of a huge new market, but within the font industry, they are not as inspired by it as they are concerned about the potential loss of control. The web market is unknown, while the print market is fixed. The conflict of new and old media is reborn , this time in fonts.The concerns of the creators of commercial fonts are much deeper than the scenario of a situation when a site visitor sees the font he likes, digs into CSS and downloads it. Let me offer an explanation so you can better understand why there are font services that use “disguise,” and in some cases complicated and stupid licensing agreements.
Font makers have seen what happened to the music, books, newspapers, magazines, and image banks, and they fear the same thing will happen to them. This is called iTunes Effect , and it's about price.
Font designers are still very focused on the print . In general, the main money is in servicing professional clients in the printing industry: books, magazines, decoration, and so on. Prices usually vary depending on the number of users of the product. Their main fear is that as soon as the fonts appear on the network, they will become a consumer product, the existing business model will collapse and the fonts will depreciate. Font designers are afraid that they will not be able to request, say, $ 420 for four font families for 6-10 users, in a world where fonts are provided on sites for a “conditional” unlimited number of visitors who do not have to pay anything for it. What if the Internet lowers prices in the print sector and by itself does not actually generate revenue?
Caution buyers
In response to the “Internet threat”, some commercial font designers have chosen font stores and “masking” services. Essentially, these services use the Amazon Kindle model, but instead of books, you get what the books are made of - fonts. They are distributed in a measured, controlled way so that the font makers take where each font goes and by whom it is used. Masking focuses on preventing normal downloads and the ability to create fonts installed in the operating system, and therefore the font is not available for use in programs such as InDesign. The main task of such services is to keep font families in their hands.
The increase in discussions between font vendor representatives such as Microsoft, Adobe, Monotype Imaging and others, due to the appearance of Typekit last year, in recent months has led to the creation of such masking services as Microsoft's font distribution proxy, Ascender Corp , Extensis ( software specialists). management and licensing of fonts), Monotype Imaging , and the team , including the Font Bureau from David Berlow .
I can tell you that the guys from Extensis, Ascender and Monotype are happy and enthusiastic about providing fonts for the web. But they certainly will not be in a hurry to tell you that the distribution system of these fonts is created within the limitations of a smart, but “ dirty ” DRM-like structure . It's clear. But attempts to identify and prevent cases of unlicensed distribution through code have proven to be inexpedient for virtually everyone and in the long run, all attempts to disguise fonts look futile and inappropriate.
Font designer Ray Larabie expressed it the best :
Protecting fonts from being installed into the operating system, while using fonts anywhere other than the web, a sign of retrograde, looks ridiculous and stupid. Install fonts in your OS? Yes, please, grandpa! In the near future, no one will want to install the font in the operating system.
Buyer, be grateful
As usual, there is a downside. You can consider FHOS as a phase. Services are updated all the time. For example, the WebINK service from Extensis is a free installable “preview wizard” of the Type Drawer fonts, which allows, among other things, to instantly change certain fonts on a page by simply dragging them. This saves a lot of time and this is what designers need in their work. At the moment, this is a proprietary development of WebINK, but it forms the direction of development of services.
Font Service Checklist
As for me, I focus on providing information for developers . And as a web author, now that I do not have to rely on the operating system in terms of fonts, except as a reserve, I feel uncomfortable with the idea that such a basic and fundamental part of the design of my site as a font will be controlled by external the essence. Further, not a single independent web designer with whom I have spoken about this, under any circumstances, agrees to clamp the client with a constant expense on fonts. There are thousands of free fonts and many of them are of the same quality or even higher than those offered by FHOS services .
Needless to say, you should know at a minimum what technological differences there are between what the service provides and what you can do if you keep the files at home. Under the influence of the checklist recently proposed by EFF in connection with the explosion of digitized books , here is a variant of the checklist of consumer FHOS services:
- What exactly are the obstacles created in an attempt to prevent the downloading and installation of fonts in the operating system? How much does the number of requests to the server grow as a result?
- Is caching disabled? Will users first see the "untidy" fonts, which will then be replaced by the necessary ones? (Flash Of Unstyled Text)
- If splitting a font file into pieces is a disguise technique, how can this affect the pitch and kerning? And is splitting a font file into pieces an additional risk factor in some browsers?
- Does the service really meet the standards and allow you to use the CSS3 standard in its entire width, as modern browsers that support
@font-face?now allow@font-face? - Is the User Agreement or Terms of Use understandable? Do you or your client agree with the binding provisions of the contract? If you stop using the service and keep your fonts in your home, do you compromise the agreement?
- What is the privacy policy? Will the service monitor and save activity logs on your site, and if so, how? What will happen to this information?
- Will the terms of the contract determine the rights of visitors to your site? Do your website visitors have the right to use the font not only for display on the screen, but also to print it and create a PDF? Will those users who try to download font files individually be at risk? (Let's admit, we all watch how people make their sites, this is the Internet.)
- When support for WOFF (and EOT) becomes ubiquitous, will there be some way to store fonts in your room, or will you be tied to the service forever?
Comments are welcome.
Expanded OpenType Features
From the moment Mozilla’s John Daggett heads up the CSS3 Fonts Module, an impressive team of invited experts in typography design ponders the problems of advanced typography in the W3C. Already in the near future this can have a big impact on the display of mathematical symbols and non-Latin languages .
Future Flash Text Replacement
It has already been several years since the release of the iPhone, and flash on it is still not allowed. Like the iPad. The recent saying of Steve Jobs has attracted a lot of attention and it's hard to imagine that Apple will back down on this issue. Plus, the iPhone and iPad support a much simpler and more elegant alternative to drawing fonts using SVG -
@font-face . Any developer planning a new project is hard to imagine using sIFR technology in it. @font-face easier to learn and doesn’t need to have a future, it’s already the future.Google Font Library
Thanks to an unexpected development that sprang from informal conversations with guys from Typekit , Google became a provider of freely licensed fonts through the Google Ajax API . This is an open-source project in which you can find documentation, examples and information on how you can contribute to its development in the GitHub repository . Unlike many open-source projects, it has a permanent curator Raph Levien .
Making it work today
And now let's get completely confused: for IE 6–8, you can only use TTF fonts wrapped as EOT or EOT “Lite” (uncompressed). For Firefox, Opera, Chrome, and Safari, you can use TTF or OTF files as “raw” or in some cases wrapped in WOFF files or as a data URI inside the style file.SVG is going to be the primary format for fonts, but its main virtue today is support in a mobile Safari for iPhone and iPad.
Yes, it is confusing. At first. There are always big changes. But I expect web authors to do what they always do. Find a way to make it all work. Raw materials here and here . Tools here and here . Solutions here and here . So put together a few pages of examples and templates , and get ready for a mess. The time has come.
With the permission Translated of A Magazine Apart List and the author [s].
Source: https://habr.com/ru/post/104196/
All Articles