Skip to content

Instantly share code, notes, and snippets.



Last active May 12, 2017
What would you like to do?
How to add custom fonts to a Radix theme

1. Google Fonts

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


// Typography
// -----------------------------------------------------------------------------
@import url('|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;
  1. To use a custom font, use the following code in your _typography.scss file:
@include font-face('Font Family', '/path/to/font');


@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 comment has been minimized.

Copy link

@jenlampton jenlampton commented May 12, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment