Custom Fonts

There are two ways to include custom fonts in your Shortcut deployment: you can use Google Web Fonts, or you can use any CSS @font-face you want.

Google Web Fonts

At the top of src/styles/_variables.scss, include the following line for whatever Google Web Font you plan to use:

import url('https://fonts.googleapis.com/css?family=Open+Sans:600');

This is literally just the @import syntax that Google Web Fonts provides you when you select a font, so just copy/paste it from there. At that point you can reference it throughout your Sass with font-family: 'Open Sans' or similar (again, just follow the instructions that Google gives you for @import usage).

@font-face

Put your WOFF/TTF files for your font in the fonts/ directory.

In the src/styles directory, include a new file that specifies your font like you would on any website.

@font-face {
  font-family: 'Flama-semicondensed';
  src: url('../fonts/flamasemicondensed-basic-webfont.woff') format('woff'),
       url('../fonts/flamasemicondensed-basic-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Flama-semicondensed-book';
  src: url('../fonts/flamasemicondensed-book-webfont.woff') format('woff'),
       url('../fonts/flamasemicondensed-book-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Just be sure to include this new source file in src/components/Main.js with the line:

require('styles/flama.scss');