- Copy the
@import
url from https://fonts.google.com. - Edit
/scss/base/_variables.scss
and add your@import
url under// Typography
. - 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;
- 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
. - Place the following
font-face
mixin in your subthemescss/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;
}
}
- 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... :)