Gulpfile: WebFonts

The JSX section in the Gulpfile is delimited by a BEGIN Base64 CSS and END Base64 CSS and consists of 3 tasks. Of the 3 the most important is the first task base64-css:convert.

Assuming that your project name is app your webfont folder should be located at public/fonts/dropbox/app. We have simplified the process of including webfonts in your project. All you have to do is drop a TTF file of your favorite font into the above folder and let gulp take care of the rest.

Behind the scenes gulp converts the TTF file to WOFF format and then base64 encodes the binary output and concatenates it with the other fonts and writes it to public/css/fonts/app/fonts.css. This is the preferred way of including web fonts in your project. You'll notice performance improvements immediately and you needn't worry about maintaining and serving 5 different font types.