Managing fonts with PostCSS

In our previous demo, we explored a means to automatically add links using PostCSS—it shortcuts the need to worry about providing the right locations for files. The trouble is, when used with custom fonts, it still requires too much work (yes, I know, we humans are inherently lazy!). There is a better alternative:

Enter the postcss-fontpath plugin, available from https://github.com/seaneking/postcss-fontpath; this is a simple plugin that requires limited information about our custom font, and in return will produce the full font-face declaration at the compilation stage.

So, rather than talk about it, why don't we put it to use? Let's revisit the responsive image demo we covered in the previous demo, and alter our style sheet to use the fontpath plugin to handle our custom font:

We'll start by extracting a copy of the Tutorial20 folder from the code download that accompanies this book, and save the folder to the root of our project area.
Next, take a copy of package.json and gulpfile.js files from the Tutorial20 folder, and replace the existing versions that are at the root of our project area.
Go ahead and fire up a Node.js command prompt, and change the working folder to that of our project area.
At the command prompt, enter this command, then press Enter:
```
npm install postcss-fontpath --save-dev
```
Although we've installed the plugin explicitly, we can easily install it using just npm install; the presence of the package.json file in the folder will tell NPM what to install (in this case the missing postcss-fontpath plugin). Keep the session open, we will use it again shortly.
Take a copy of styles – pre-compile.css from the css – completed version folder, and save this as styles.css into the src folder at the root of our project area.
Revert back to the Node.js command prompt window, then enter gulp at the prompt, and press Enter.
If all is well, we should see the, by now, familiar style sheets and source map appear in the dest folder; copy these to the css folder within the Tutorial20 folder.

At this point, we should now have a working demo; we won't see anything intrinsically different, but know that at compilation, PostCSS has automatically added the right font-face declarations for our font.

The beauty about this plugin is in its simplicity—it needs no more than the addition of a simple command in the main task:

gulp.task('fonts', function () {
  return gulp.src('src/*.css').pipe(
    postcss([ fontpath() ])
  ).pipe(
    gulp.dest('dest/')
  );
});

There is no need to have to specify any additional configuration elements or rules, the plugin does exactly what it says on the tin, so to speak! Although we've not achieved anything ground-breaking with this example, it does serve to illustrate some key points about using PostCSS:

PostCSS works best when plugins concentrate on a single task and don't try to achieve everything under the sun in one go. Adhering to the single responsibility principle means we can reduce duplication, make the plugin more robust, and avoid instances where changes can end up breaking functionality elsewhere in our processor! This plugin is perfect—it just provides a font-face declaration for the specified font, and nothing else.
Sometimes, when choosing the right plugin in PostCSS, there will be occasions when we choose something that later turns out not to work as expected. A case in point is the postcss-font-magician plugin (available from https://github.com/jonathantneal/postcss-font-magician); it has the right idea of providing font-face declarations, but tries to provide them for Google-hosted fonts, locally hosted fonts, Bootstrap, and so on.
Note
Unfortunately, the net result is that at the time of writing, not all of the functionality appears to work as expected, so it is at this point where we have to look for alternatives.

If you would like to explore more, then the postcss.parts directory (at http://www.postcss.parts) has more options available; two that might be of interest are the Assets Rebase plugin (from https://github.com/devex-web-frontend/postcss-assets-rebase), and the PostCSS Font Pack plugin, from https://github.com/jedmao/postcss-font-pack. We will cover the latter plugin in more detail in Chapter 8, Creating PostCSS Plugins.

Okay, so we have our text in place: it does look a little boring, doesn't it? Well, we can fix that by adding images. So, how exactly can PostCSS help us, I hear you ask?

It can help in a number of ways—instead of using plain colors, we can begin to mix some together, for example. Or how about using image sprites? A pain to create manually, right? Not with PostCSS. I'll bet you've seen some of the image filters you can use on images (such as sepia or tint), but found that they don't work in every browser right?

These are just some of the ways that PostCSS can help us, and we will cover all of these and more throughout this chapter. Let's make a start though on working with images: our first demo will cover the creation of image sprites. We'll start with a quick recap of the SASS process, before switching to using PostCSS.

Previous Chapter

5. Managing Colors, Images, and Fonts

Next Chapter

Creating image sprites

Table of Contents for Mastering PostCSS for Web Design

Managing fonts with PostCSS

Note

Table of Contents for
Mastering PostCSS for Web Design