Using Web Safe Fonts in a Rails Application
Learn how to integrate custom web safe fonts into a Ruby on Rails application to customize the typefaces shown throughout the app.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this lesson, I'm going to walk you through on how to add built-in fonts to your application.

I don't like the default font on my home page, and I want to replace it with a few built-in CSS fonts. To do that, let's open up styles.scss and play around with some fonts. For example, I add this style to my h1 tag.

h1 {
  font-family: "Arial Black", Gadget, sans-serif;
}

Now, if you go to the browser, you can see this change, and my new home page looks like this.

medium

Next, if I want a different font for my paragraph tags, 

p {
  font-family: "Lucida Sans Unicode", Lucida Grande, sans-serif;
}

This change is now reflected in my home page.

medium

So, this is how you access some of the fonts that are already built-in for you. These are also known as Web Safe Fonts, and you even google to see what fonts are available.