Adding Custom Fonts To A Rails 8 App

Adding a custom font to a Ruby on Rails 8 application is simple. There are two things we need to do be able to apply a custom font to our site. First we need to place the font file in the correct location, and second we need to update our site's CSS to be able to find that font file and then use the font information. 

Rails apps have a standard folder where it expects assets, like style-sheets and icons, to be. This is the `app->assets` folder. We can organize our assets by adding more folders. We can add a `fonts` folder to our assets folder. 

app
  -> assets
    -> fonts
    -> stylesheets
  -> etc...

We can now add our fonts to this folder. I am going to use the Goudy Bookletter 1911 font offered by the League of Moveable Type, which has a selection of fonts that you can use on your site. 

app 
  -> assets
    -> fonts
      -> goudy_bookletter_1911.ttf

We now need to update our CSS file to reference this font, and then apply the font. 

@font-face {
  font-family: "Goudy Bookletter 1911";
  src: url("goudy_bookletter_1911.tff");
}

body {
  font-family: "Goudy Bookletter 1911", Arial, Helvetica, sans-serif;
}

In the `@font-face` rule we define the name of the font, and the location of the font. The name can be whatever we want it to be, its just a way to reference it other CSS rules. In the `body` rule, we apply the font. We also define backup fonts in case our custom font cant be applied, like it wasn't able to be downloaded. 

With these two steps, we can use Rails simple asset pipeline to add custom fonts to our site.