Documentation for adding fonts to Liveview Project

Questions / Help
,
8

I made a small script to retrieve fonts and have them locally…

#!/bin/sh

for family in $*; do
for url in $( {
for agent in \
'Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' \
'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1' \
'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)' ;
do
curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | \
grep -oE 'http://[A-Za-z0-9/._-]+'; \
done } | sort -u ) ;
do
extn=${url##*.} ;
file=$(echo "$family"| tr +[:upper:] _[:lower:]);
echo $url $file.$extn;
curl -s "$url" -o "$file.$extn";
done
done

For example.

$ ./get_font.sh Roboto
http://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxM.woff roboto.woff
http://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxPKTU1Kg.ttf roboto.ttf

Usually I put them in assets/fonts and have them processed by webpack, and file loader.

Then I just add a font stylesheet… like this.

@font-face {
  font-family: roboto;
  src: url("../fonts/roboto.ttf") format("truetype"); /* For IE */
  src: local("roboto"), url("../fonts/roboto.ttf") format("truetype"); /* For non-IE */

  src: local("roboto"), url("../fonts/roboto.woff") format("woff");
}

and the webpack rule.

        // Load fonts
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]",
                // Relative to output public_path
                outputPath: "./fonts/"
              }
            }
          ]
        },

You need to install file_loader npm package to do this…

4 Likes