Custom fonts in your Rails app

There are numerous free fonts available on the Internet, and most of them are also available on Google Fonts. Using fonts available on Google is an extremely simple and straight forward thing. You can use any of the following techniques

 <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Roboto');

However, there are times when fonts you want to use are not available on Google Fonts and other online font foundries - it may be because that particular font is not yet added there or it is a commerically licensed font. In those cases, you receive font files which can be in TrueType Format (.ttf), OpenType Format (.otf), Web Open Font Format (.woff or .woff2)


There can be more than one file for any particular font you are trying to use - they differ on font weight (normal, thin, medium, semibold, bold which are usually represented with numbers between 100 and 900) or font style (italic, normal etc.)


Here are sequence of steps you can follow to add these font files and corresponding css in your project:

@font-face {
  font-family: "HK Grotesk";
  src: url("./HKGrotesk-Regular.woff2") format("woff2"),
    url("./HKGrotesk-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "HK Grotesk";
  src: url("./HKGrotesk-ExtraBold.woff2") format("woff2"),
    url("./HKGrotesk-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
class Application < Rails::Application
  # Precompile fonts.
  config.assets.paths << Rails.root.join('app/assets/fonts')
end
font-family: 'HK Grotesk', sans-serif;
© 2022 Abhinav Saxena   •   Powered by Soopr   •   Theme  Moonwalk