Beautiful fonts with @ font-face

Although Firefox 3.0 improved the display of fonts by introducing support for kerning, ligatures, various thicknesses, as well as support for displaying complex outlines, the authors limited the use of only publicly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS rules @ font-face - this is the way to attach TrueType and OpenType fonts in the same way as now the code and illustrations are attached. Safari browser supported this type of hyperlink to the font, starting with version 3.1, and Opera announced that they plan to support it in Opera 10.

Using @ font-face to hyperlink to a font is relatively easy. Inside the style file, each @ font-face property specifies the name of the font family to be used, and the loadable font resource, and the style characteristics of the specified style — say, whether it is bold or italic. Firefox 3.5 downloads fonts only as needed, so a style file can specify a complete set of fonts, of which only a few can be used in reality.

/* Graublau Sans Web (www.fonts.info) */ @font-face { font-family: Graublau Sans Web; src: url(GraublauWeb.otf) format("opentype"); } body { font-family: Graublau Sans Web, Lucida Grande, sans-serif; }

Browsers that support @ font-face will display text using Graublau Sans Web, while older browsers will display it using either Lucida Grande, or the default sans-serif style . Here is an example :
')

Let's dig a little deeper

Today, most of the font families consist of only four styles: ordinary, bold, italic, and bold italic. To define each of these styles, the font-weight and font-style descriptors are used . They set the style of the outline; the principles of cascading and inheritance do not apply to them here. Without being explicitly specified, each of them takes the value “normal” by default:

 /* Gentium by SIL International */ /* http://scripts.sil.org/gentium */ @font-face { font-family: Gentium; src: url(Gentium.ttf); /* font-weight, font-style ==>   normal */ } @font-face { font-family: Gentium; src: url(GentiumItalic.ttf); font-style: italic; } body { font-family: Gentium, Times New Roman, serif; }

The sample text is shown below displayed using this font family:

There is a feature that is not difficult to overlook: @ font-face allows the creation of families with more outlines than just plain and bold — you can define up to nine fat values within a single family. This is true even for Windows, where the internal flaws of the platform usually limit font families to only the normal and bold fatness values. Existing fonts, similar to the Japanese project M + Fonts (open source), have as much seven fat content. As an example, we take a sample of them:

In some circumstances, authors may prefer to use fonts that are available to the reader locally, and download fonts only when the corresponding styles are not available. This is possible if you use “local ()” when specifying the “src” descriptor in the @ font-face rule . The browser will sequentially try out the font list items from the “src” descriptor, until it successfully downloads the desired font.

 /* MgOpen Moderna */ /* http://www.zvr.gr/typo/mgopen/index */ @font-face { font-family: MyHelvetica; src: local("Helvetica Neue"), local("HelveticaNeue"), url(MgOpenModernaRegular.ttf); } @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } body { font-family: MyHelvetica, sans-serif; }

Here is a screenshot showing the top-down display of a simple example using Mac OS X, Windows and Linux using the font family defined above:

The Helvetica Neue font family is available on most Mac OS X systems, but is usually absent on Windows and Linux machines. When this example is displayed on Mac OS X, the local styles of Helvetica Neue are used, and no font is downloaded. On Windows and Linux, an attempt to load a local font fails, and the wildcard font (MgOpen Moderna) is downloaded and used instead. MgOpen Moderna was planned as a replacement for Helvetica, so it appears similar to Helvetica Neue. In this way, the author can provide the desired appearance of the text, but avoid downloading the font when there is no need for it.

The name used to refer to a specific font style is the full name of the individual font. Usually, this is the name of the family plus the name of the style (for example, “Helvetica Bold”). In Mac OS X, the name is displayed on the information bar for the specified face. Select one style and select “Show Font Info” from the “Preview” menu in FontBook:

Similar tools exist under Linux. Under Windows, use the font properties extension , a free downloadable Microsoft viewer for these names. When the extension is installed, the properties panel displays information about the individual font. The full name is indicated as “Font Name” on the “Name” tab:

Safari for Mac Os X only supports searching by PostScript names, so Postscript names for Mac OS X are also supported. For OpenType PS fonts (usually marked with the extension “.otf”), the full name is the same as the postscript name under Windows. So for these fonts, the authors are encouraged to specify both the full name and postscript, and thus achieve cross-platform performance.

Multi-language support

Many languages suffer from a lack of publicly available fonts. In cases of minority adverbs and ancient inscriptions, the choice is literally narrowed down to a handful. Using @ font-face allows authors using such languages to improve the situation by connecting fonts to their pages.

 @font-face { font-family: Scheherazade; src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(fonts/ScheherazadeRegOT.ttf) format("opentype"); } body { font-family: Scheherazade, serif; }

Languages like Arabic require a change in the shape of the text, in which the symbols surrounding it affect the display of a given character. Different platforms use different rendering technologies to make the text shape change possible; under Mac OS X, AAT fonts are required, while under Windows and Linux, OpenType fonts are required. If there is no font in the format required by this platform, changing the shape of the text will not be displayed correctly.

Under Mac OS X, the AAT version of the font is downloaded. On Windows and Linux, where rendering with AAT fonts is not supported, downloading the AAT font is skipped, and OpenType is used instead. Therefore, the text is displayed correctly on all platforms.

Cross-site font usage

By default, Firefox 3.5 allows fonts to be downloaded only for pages from the same site. This prevents sites from using free and free fonts found on other sites. For those sites that clearly want to allow cross-site font sharing (for example, for an online font library), Firefox 3.5 supports the use of access control headers that control this behavior. By adding an extra header to HTTP headers sent with font files, sites can make cross-site usage possible.

 #  .htaccess- Apache      <FilesMatch "\.(ttf|otf)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

When this HTTP header is enabled, any page gains access to the fonts of this site, and not just the pages from the same site.

Font licensing issues

When a font is used on a site, it is always important to make sure that a font license allows its use on the site. If the license agreement is filled with vague legal expressions, consult your font vendor before using the font on the site. If a license permits its use, then it would be nice to add a comment next to the @ font-face rules pointing to the license for future reference.

“I found a free font, can I use it on my website?”

Maybe; and maybe not. Some free fonts are distributed as promotional inviting products (in order to encourage them to be purchased) - and they are not allowed to be distributed on their own or uploaded to a server on the Web. Check your license, even with free fonts.

“I just want to use [insert the name of my favorite font here] on my website. Is this possible? ”

Right now, most likely not. The use of attached fonts on the Web was hardly popular. Most of the fonts that now come with proprietary operating systems have licenses that restrict their use by standard desktop applications, so pumping these fonts on a web server is almost certainly not allowed. In the past, font production was a lot of misery from piracy, so most font producers are wary of allowing their fonts to be used outside of relatively limited contexts. Many font vendors have focused on the needs of the printing industry, which is often reflected in the relative complexity of their licenses. In the future, some font designers may come to the conclusion that the sale of fonts as Web fonts will surpass any potential damage to sales from piracy, while others may not come to such a conclusion. Their license agreements will reflect their choice, and they should be treated with respect.

The market for photo sales is often referred to as two billion dollars, and the Web font market is still close to zero, so it can only grow!

Attaching fonts in Internet Explorer

Attaching fonts has long been possible in Internet Explorer, but only fonts in the proprietary EOT font format. There is only one way to create EOT fonts - use the Microsoft WEFT tool , available only on Windows. Only TrueType and OpenType TT fonts can be converted to EOT format, and OpenType PS fonts (.otf) cannot be used.

In the @ font-face rules, Internet Explorer accepts only font-family and src descriptors, so each family can contain only one style. It does not understand the format () instructions and will ignore any @ font-face rule containing such instructions. This behavior can be used to enable font attachment cross-platform:

 /*    Internet Explorer */ /* (**  ) */ @font-face { font-family: Gentium; src: url(Gentium.eot) /*   format() */; } /*      */ @font-face { font-family: Gentium; src: url(Gentium.ttf) format("opentype"); }

Future work

In Firefox 3.5, font-stretch and unicode-range descriptors are not supported. Fonts defined in SVG documents are also not yet supported. We consider their introduction in future releases of Firefox. As always, patches are welcome!

For further reading

Documentation

Examples

Font resources

Font policy

Source: https://habr.com/ru/post/64596/

All Articles