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
Tutorial20folder 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...