Wednesday, June 10, 2015

Using Custom Fonts in Rails 4.2

There is no need to configure anything as long as you have fonts copied to app/assets/fonts directory. Make sure to use the font-url to use custom fonts. You can see this font in action at RubyPlus. My style.css.scss looks like this :

@font-face {
font-family: 'OpenSans-Bold';
  src:font-url('OpenSans-Bold.ttf');
}

@font-face {
font-family: 'OpenSans-BoldItalic';
src:font-url('OpenSans-BoldItalic.ttf');
}

@font-face {
font-family: 'OpenSans-ExtraBold';
src:font-url('OpenSans-ExtraBold.ttf');
}

@font-face {
font-family: 'OpenSans-ExtraBoldItalic';
src:font-url('OpenSans-ExtraBoldItalic.ttf');
}

@font-face {
font-family: 'OpenSans-Italic';
src:font-url('OpenSans-Italic.ttf');
}

@font-face {
font-family: 'OpenSans-Light';
src:font-url('OpenSans-Light.ttf');
}

@font-face {
font-family: 'OpenSans-LightItalic';
src:font-url('OpenSans-LightItalic.ttf');
}

@font-face {
font-family: 'OpenSans-Regular';
src:font-url('OpenSans-Regular.ttf');
}

@font-face {
font-family: 'OpenSans-Semibold';
src:font-url('OpenSans-Semibold.ttf');
}

@font-face {
font-family: 'OpenSans-SemiboldItalic';
src:font-url('OpenSans-SemiboldItalic.ttf');
}