How to add custom fonts to a Radix theme

README.md

1. Google Fonts

1. Copy the @import url from https://fonts.google.com.
2. Edit /scss/base/_variables.scss and add your @import url under // Typography.
3. Update the $font-family variables.

Example:

// Typography
// -----------------------------------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Merriweather');

$font-family-sans-serif:  'Open Sans', Helvetica, Arial, sans-serif !default;
$font-family-serif:       'Merriweather', 'Times New Roman', Times, serif !default;

2. Custom font files

1. Place your font files under assets/fonts. Make sure you have at least the following files types for the best browser support: eot, woff, woff2, ttf, svg.
2. Place the following font-face mixin in your subtheme scss/base/_mixins.scss file. (Radix will most probably ship with this in future versions).

@mixin font-face($family, $src, $style: normal, $weight: normal) {
  @font-face {
    font-family: $family;
    src: url('#{$src}.eot');
    src: url('#{$src}.eot?#iefix') format('embedded-opentype'),
    url('#{$src}.woff') format('woff'),
    url('#{$src}.woff2') format('woff2'),
    url('#{$src}.ttf') format('truetype'),
    url('#{$src}.svg##{$family}') format('svg');

    font-style: $style;
    font-weight: $weight;
  }
}

3. To use a custom font, use the following code in your _typography.scss file:

@include font-face('Font Family', '/path/to/font');

Example:

@include font-face('Avenir Book', '../fonts/AvenirLTStd-Book');

Then you can use the font as follows:

// In _variables.scss
$font-family-sans-serif:  'Avenir Book', Helvetica, Arial, sans-serif !default;

// Then use it as follows:
h2 {
  font-family: $font-family-sans-serif
}

This is so much simpler than what I was doing... :)