Package Multiple Versions of Font for Upload to Website

Thierry Blancpain is a brand and interaction designer at Informal Inquiry in New York City and co-founder of Grilli Type, a Swiss type foundry. While this commodity is generally applicative to all spider web fonts, Grilli Type fonts are used throughout as examples of the concepts, peculiarly those demonstrating OpenType features.

Using your own fonts instead of organization fonts is getting easier, simply information technology's still an evolving field. We'll become over the unlike types of font formats and cover tips and best practices for them in this post. We'll too dive into more than in-depth features for those of you who desire to level up and aim to perfect the arts and crafts with avant-garde concepts and considerations when using web fonts. In the end, you'll hopefully feel equipped non only to put spider web fonts to use but to get the virtually out of them.

Here we go!

Font Formats

When you buy web fonts licensing, you receive a package of font files that typically include at least some of the post-obit formats:

• Embedded OpenType (EOT): EOT is a legacy format developed by Microsoft. Older Internet Explorer versions require EOT to render your spider web fonts. EOT is often served uncompressed so, if y'all don't require browser support of the likes of IE8 or below, then you're better off leaving it out.
• TrueType (TTF): TTF is a font format developed by Microsoft and Apple in the 1980s. Mod TTF files are as well chosen TrueType OpenType fonts. TTF can exist useful for extending support to some older browsers, particularly on mobile, if you lot need information technology.
• Web Open Font Format (WOFF): WOFF was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported past all modern browsers.
• Web Open up Font Format two (WOFF2): WOFF2 is an update to the original WOFF format. Developed by Google, this is considered the all-time format of the agglomeration because it offers smaller file sizes and better performance for mod browsers that support it.

If yous are mostly targeting users with modernistic browsers, you tin can get abroad with a progressive method of using @font-face up that only serves WOFF and WOFF2 formats. These offer the best pinch and permit you lot to deal with fewer files in your code. And if a user's machine is so former that it doesn't support either of these formats, information technology may be better to just serve them a system font for operation reasons, anyway.

If you want to aggrandize back up as wide as possible, then add EOT and TTF files to the mix. SVG fonts accept also been traditionally used for expanding browser support just, at Grilli Type, we don't offer SVG fonts anymore equally they bring with them a number of downsides. Google Chrome for instance has even completely removed support for the format.

Embedding Web Fonts

Nosotros make utilize of @font-face to include fonts in CSS.

Hither'south the deepest level of back up, including all of the font file formats we've discussed and then far:

          @font-face {   font-family: FontName;   src: url('path/filename.eot');   src: url('path/filename.eot?#iefix') format('embedded-opentype'),     url('path/filename.woff2') format('woff2'),      url('path/filename.woff') format('woff'),     url('path/filename.ttf') format('truetype'); }        

We can trim things downward quite a bit if nosotros're only aiming to support mod browsers:

          @font-face {   font-family: FontName;   src: url('path/filename.woff2') format('woff2'),      url('path/filename.woff') format('woff'); }        

In one case the font has been alleged and defined, we can put it to utilize on our elements. For example:

          body {   font-family: 'FontName', Helvetica, Arial, sans-serif; }        

Hosting Web Fonts

Ane of the most flexible means to load web fonts is to self-host them. That ways that you host the files on your own server and your fonts volition ever exist available when a company comes to your website without a third-party dependency. Neither tracking codes nor JavaScript is by and large required to load cocky-hosted font files. Many modest type foundries offer fonts equally a directly download so they can be self-hosted and at Grilli Type, we are convinced it's the best way to serve fonts.

While some blazon foundries offer self-hosting (both with and without cumbersome restrictions and requirements), others only offer hosted solutions, meaning they host the files on your behalf. Some of the well-known ones include Hoefler & Co., Font Agency, and Typotheque. Font Bureau and Typotheque offer their fonts in both ways at different cost points.

Make sure you lot know how a type foundry's web fonts are offered before you lot buy licensing, because the departure in hosting and the terms of utilise tin bear upon how they are implemented. Go what makes the well-nigh sense for you and fits your needs, and make sure you're using them legally and according to the foundry's licensing agreement.

Advanced Typographic Features

Let'southward take a look at some of the more avant-garde features of spider web fonts.

Spacing and Kerning

There are ii settings inside font files that define the space betwixt characters:

1. letter-spacing: This is defined equally side bearings on the left and right side of each character
2. font-kerning: This refers to specific adjustments between two characters

Spacing cannot be turned off at all, considering otherwise the text rendering engine (your browser) wouldn't know what to practice with these letters. Kerning, on the other manus, is turned off past default in browsers and has to be turned on by y'all in your CSS.

Comparing blazon with kerning enabled and disabled.

Information technology'due south easier to control kerning than you might call up! Here's how to activate it across all browsers that support it:

          p {   font-feature-settings: "kern" i;   font-kerning: normal; }        

If you don't apply a something like Autoprefixer to assist manage browser support in CSS, and then you lot'll desire to manually write out the browser vendor prefixes for this setting to extend browser support to older versions:

          /* All vendor prefixes for `font-characteristic-settings` */ p {   -moz-font-feature-settings:    "kern" 1;    -ms-font-feature-settings:     "kern" i;    -o-font-feature-settings:      "kern" 1;    -webkit-font-characteristic-settings: "kern" 1;    font-feature-settings:         "kern" one;   font-kerning: normal; }        

Advanced OpenType Features

We just discussed how to employ the font-feature-settings aspect to control kerning, but information technology can also be used to command other bachelor OpenType feature in your web fonts. The number of supported features has been growing over time and the CSS-Tricks almanac is a good identify to reference what is possible with OpenType.

OpenType features are really exciting because they open up a bunch of possibilities for controlling fonts without having to serve multiple files to go the same effect. At the aforementioned time, information technology's worth noting that the features an OpenType font file supports is up to the font designer and that non all fonts support the same features.

To illustrate how advanced OpenType features can exist chained together, the following code would plough on the numeric characters of an OpenType-enabled font that supports both former-style numerals (onum) and proportional numerals (pnum), plus enable kerning and activate a specific stylistic set included in the font:

          .my-element {   font-feature-settings: "onum" 1, "pnum" one, "kern" 1, "ss01" 1; }        

Type with and without the activated OpenType features in the code example.

The font-feature-settings aspect tin can be used to activate stylistic alternates, discretionary ligatures, different types of figures bachelor in a font, small caps, and other handy things. Typofonderie has a nice overview of these advanced features, including examples.

Because font-feature-settings is used to set many OpenType features at once, information technology's not possible to define a single setting differently as the other choices volition not be inherited. All of the features would need to exist divers again to alter the settings for child elements.

Letting Spacing and Discussion Spacing

CSS has long supported the letter-spacing and discussion-spacing attributes. When used correctly, both provide a fair amount of control over ii very of import aspects of how your type will look.

As with all things typography, you'll desire to learn how to evaluate different options both functionally and visually and make decisions based on your impression. Dissimilar contexts may call for different spacing needs.

At smaller sizes, about typefaces will benefit from a little extra spacing between characters and words. In larger contexts, like headings, typefaces may benefit from more narrow spacing. In either case, the right decisions require attention and your all-time judgment based on the outcomes.

I've found that alphabetic character-spacing and word-spacing both work best using em units for the values. That allows the spacing to adapt fluidly based on the font size of the element they are applied to. The following example volition give your content a fiddling more than room to exhale at smaller font sizes:

          p {   font-size: 12px;   letter-spacing: 0.015em;   word-spacing: 0.001em; }        

Comparison the deviation with letter and give-and-take spacing turned on and off.

Font Rendering

Using type on screens brings upwardly important questions about how they are rendered. Fonts are usually designed on about a 1000 units tall grid—or fifty-fifty larger—but then are displayed at something similar a 16px font size. In an interplay between device, screen, and software, this reduction in resolution and fidelity requires some smarts to make modest type legible and good-looking. Again, be observant, test in many browsers, and use your best judgment to put the best methods to use to increase legibility.

Hinting

Every operating arrangement treats fonts differently from one some other. In MacOS, the smarts are in the operating system (and thus can evolve over fourth dimension), while the fonts themselves tin can exist dumb. Historically, on Windows, the smarts were supposed to be included in the font software, and the system was supposed to use those smarts to determine how a font should be rendered at different sizes.

Those smarts are called hinting. Hinting information embedded in the font files can tell a computer that the two stems of an "H" character are supposed to have the aforementioned line width, or that the space above and below the crossbar should stay about equal at smaller sizes.

Hinting is a very circuitous and complicated topic, but the important takeaway is that the same font at the same size might render differently, even on the same calculator depending on many factors, including the screen, the browser, and even the font and background colour.

Microsoft provides a guide on the topic of hinting. Even though information technology was initially released in 1997, it'due south still a good read because it so thoroughly explores the topic.

Font Smoothing

While hinting information included in the font files is mostly beingness ignored on MacOS, specific browsers offering some boosted control over font rendering.

          p {   -webkit-font-smoothing: antialiased; /* Chrome, Safari */   -moz-osx-font-smoothing: grayscale; /* Firefox */ }        

Using these CSS properties leads to sharper, thinner text rendering on MacOS and iOS. Simply beware: this can also pb to rendering problems, especially if you lot're already using a thin font or font weight.

Both antialiased and grayscale are mainly useful to balance the rendering of fonts when using light text on dark backgrounds, as they would otherwise get rendered quite a bit bolder.

The font-smoothing belongings and its values are not on the path to become a standard CSS feature, so employ information technology with circumspection and peradventure simply in contexts where yous know you demand to target a specific browser and context.

Caution: OptimizeLegibility

We oft come up beyond this aspect when troubleshooting font usage on Grilli Type customer websites:

          p {   text-rendering: optimizeLegibility; }        

Among other things, information technology activates kerning. That was very useful at some bespeak, simply is not needed anymore (equally shown above). In addition to kerning, information technology also activates all kinds of ligatures, including extravagant ones that may exist present in the font files.

Although there are some use cases for this, do non use this feature if you lot don't know exactly what you're doing with it. Chance are y'all don't need it in the first place.

Web Font Resources

If you're ready to dive deeper into web fonts, here are a handful of recommended resources you tin can employ to learn more:

• Clagnut's OpenType CSS Sandbox past Richard Rutter: A keen place to exam out OpenType features and hands put together your required CSS lawmaking.
• Webfont Handbook by Bram Stein: This is the almost in-depth east-book you can possibly read on web fonts, font rendering, and font functioning.
• Copy Paste Graphic symbol: This is a great website that allows y'all to access pretty much any special character you might ever use.
• Using @font-confront past CSS-Tricks: This article includes snippets for declaring web fonts based on varying browser support.

Advanced Web Font Considerations

For those who are set to level upwards to more than avant-garde techniques, here are even more considerations to take into account:

Uploading Licensed Fonts to Github

If yous commit a project to a public repo and use font files that you accept licensed, please make sure that either the fonts or the directory that contains them is included in your .gitignore file so that they do non go uploaded. This will prevent others from taking and using your font files, and information technology can prevent you lot from breaking any terms of use for licensed fonts that usually have usage and sharing restrictions.

          .DS_Store   path/to/web/fonts/folder/*        

Font Loading Tactics

Loading web fonts can be as easy every bit but using @font-face but that doesn't necessarily offer the best possible functioning. For instance, it opens up the possibility of a Flash Of Unstyled Text (FOUT) which might be considered poor UX in some cases. Zach Leatherman's "A Comprehensive Guide to Font Loading Strategies" covers that and methods to improve the loading experience that will make you and your users very happy.

Base64-Encoded Font Files

In some rare instances, encoding your fonts as base64 inside your CSS will exist a expert idea but, generally, information technology is not—and, not to mention, you might interruption your font's licensing agreement in the process. Be sure to proceed with a lot of caution and read up on your font's terms of apply when considering base64.

CSS Text Ornamentation

The W3C is working on a draft for new controls for text decoration, mainly dealing with how to make underlining text better and easier in CSS. This is not however usable beyond all browsers, just have a await!

Variable Fonts

In 2017, the OpenType fonts specification 1.viii.ii was released, assuasive for what is called Variable Fonts. This new version of OpenType will allow for the inclusion of multiple font styles into a unmarried font file, reducing server requests and web font file sizes. Depending on the type designer'due south choices, it may also let for the use of capricious weights in betwixt existing weights and widths of fonts, among other things. Centrality Praxis is a good website to play around with some existing exam fonts – you volition demand a recent version of Safari or Chrome to do so, though.

Wrapping Up

We covered a lot in this article! Hopefully, now you have a good understanding of the different font files out there, how to piece of work with them, and all the amazing and powerful means fonts can be styled using both tried and true methods and cutting-edge features.

sullivanlusake.blogspot.com

Source: https://css-tricks.com/understanding-web-fonts-getting/

Share this post