How to Integrate Custom Fonts in a Rails 5 Application
This guide walks through two ways that you can integrate custom fonts. One way is to call fonts from a CDN. The second is to leverage the Rails Asset Pipeline and install a fonts directory.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

As you can see from pivotal tracker we simply now need to add in some custom fonts and then update the seed file for users. Let's talk about how we can add custom fonts and the site loaded up right now. If I hit refresh I will see all of the default bootstrap fonts. This is Ok, but it's definitely not ideally what I would want. I'm not a huge fan of using the default fonts of any framework. Usually I want to have something that has a custom look and feel. For that, I can go to fonts.google.com and look for all kinds of different and most of them free to use kind of fonts so I definitely recommend for you to look through it yourself and find something that works for you. I personally like this Roboto Slab and I think this is what I want to go with so I'm going to click on it. This brings up the show page and this is what I want to use for my headings but I don't want to use this for the rest of the fonts. If you scroll down they have this kind of cool thing where it shows combinations and pairings. Here we have Roboto Slab and then it shows some of the other options that are out there, to see what they look like right next to each other. Right here we have the Roboto Sans up top but then we have Open Sans here which I like. We could look at Lato which has a little bit different look and feel. Oswald, I definitely do not want to go with that, that doesn't look very good Railway, I absolutely love. But I think in this case I am going to go with the Roboto Slab for headings and then Lato here. The way that you can get these added is pretty straightforward. The first is, you can press on the little plus button and it will add that. Then you can do the same for the Roboto and then that is really all you have to do. I can click on select this font, this is actually Roboto Slab which is what I really want. I don't want regular Roboto. Now we have these items. They say the load time is fast. All that is good to go. How can we bring these in the application? Well, there are a few different ways. One is the very dead simple way which is to simply bring all of this code into our layout file. I can now close everything and open up just the layout file. This is going to be the applicaiton layout, the blog layout and then the portfolio layout. With what we have, we technically could have a custom font for every one of our layouts and that's fine if you want to do that. I'm not going to. I think that I want to have one universal font across all of them. I may change my mind at some point but that's something that I may do later. For here you can see if you look at what it provides this is calling from the Google font API. This means the one weakness with this approach is that if this your URL ever goes down then your fonts would revert back. It wouldn't be like your fonts would all disappear you'd have backup fonts that could be used but they wouldn't be the exact Lato and Roboto Slab. That's one thing to kind of keep in mind. Now that we have that what we can do, is we can use these. This is if you want to use the import this is if you want to use just the standard. Now that we have that we can come over here and grab these font families wherever we want to use them. There are a few different spots where we could do it but right now let's just focus on getting this tested to make sure that we are doing everything right and that we're bringing these all in, correctly. I have take in our application CSS file and now that we have that we can pick out exactly where we want this added. I'm going to put these here and then we will we'll call them as they are needed. For the body, I think it makes sense to have the Lato there for the font-family and then for the headings we want to use this Robot Slab. Let me see if we have something here. I can just actually search for and it doesn't look like we have them so I created something before filming this. Bring it in, all this does is it lists out all of the headings so coming back to the base structure. Right under the body. I'm going to pace this in and you feel free to take this right from the source code. All it's doing is it's taking all of the potential headings and anytime there's a heading class that is called and we're going to say that in those cases we want to use the Roboto Slap font. Let's hit save and come back and take a look at the site and this should update our fonts. If everything looks right, let's see. It might take a second to load them in and cache it for the first time and look at that. We now have custom fonts we have custom fonts everywhere we have headings. It also has updated the font for our body and for all of these elements so I am very happy with that that is working on the contact page and on the home page all of that looks really good. Let's take a look at the blog. No changes will be made here yet because we haven't added those in. Let's come and do the exact same thing that we did here and open up our blogs.scss file and as you can see right here this blog does have the full set of headings so I'm going to come here and let's just grab this Roboto Slab for the headlines. This is going to get rid of all of those and then we want to replace the body, so we can grab this and for the body we're going to replace instead of having Georgia I want to use Lato. If we hit refresh, we should have much better looking fonts on our blog especially up here. Perfect, look how much better that is. That's much cleaner and gives a better look and feel for what we're going for. If I go to any of the blog posts just to see how it looks when they've been edited. Let's take a look here. I want to see what the Ruby code looks like. If I do a class called my class and just end that just to see what the syntax highlighting looks like with the font, perfect. It's not creating any issues with that so that's perfect. Ok cool. We only have one last spot to update this which is going to be our portfolio so coming back to the code we already have brought it into the file. We simply have to open up the portfolio.scss file. Adding the first set of fonts to the body. This is going to give us the override here that we need. Then the next one is going to be for all of our nice headings. First I'm going to check and see if they already have something like this and it doesn't look like they do. I'm just going to put it right below the album and knock out the color. If I come back, hit refresh should update all of the fonts throughout the entire layout. There we go, it is looking much better. All of this is updated and now the thing I really like about this is it looks much less like a bootstrap kind of site than before because now we're not using those defaults provided by bootstrap. This is now working across each one of the pages. This is one way and it's probably the most straightforward way of bringing fonts in. This isn't the only way of doing it. One of the other ways would be to actually download the font so you would come here and you would click on this download right here and this would bring in the fonts. Let's actually opened this up, close out of a few of these. We have our fonts and if I double click that to unzip it. This has Lato and Roboto Slab and has all of the different variations it has Lato black, it has light, all of those. We just have to pick out. I believe it's just Lato-Regular. Then for Roboto Slab I believe it's just RobotoSlab-Regular. What we would need to do is in Sublime Text come to assets and just add a new directory here. I would create a new folder here called fonts and inside of this, this is where I would go and add these in. It's completely up to you if you want to follow this. For a portfolio, I don't see this as being a hugely necessary thing if you're building out a mission critical application where the design and UI is very very important and you can't have even a second of you know a slightly different bunch showing up and then you may want to go with this approach. You can take both of these fonts pull them right here and now what you could do is actually reference these. Instead of being able to call them from here and just say in your Roboto Slab what we'd have to do is actually create a font family call. The way that you can do that we can test it out right here. Personally, I'm not sure if I'm going to do this across all of them but I did want to show you just so you didn't think there was only one way of doing it. The way you could do it is you could say font-face and then pass this in. Here you say font-family and here this would be exactly the same or pretty much the same of what we are doing here. We could say font-family Lato, sans-serif and bring that right in here. Then we need to provide a source, the way that that works is you type SRC:font-url('Lato-Regular.ttf'). This I believe is going to give us an error if we try this right now. Or actually let me call it from the portfolio. I forget if the newest version of Rail's throws an error and complains right now or not. But Ok so far does not. Now that we have that now we could call our font family here in the body and I believe this is all we have to do. Let's see if this is working. I believe that that is working. It's a little bit harder to see because the default font with bootstrap is actually kind of similar to this. Let's also try this let's add another font face for the heading because that's a much better indicator of if this is working or not. Let's come down and see where we have it go, our Roboto Slab here and also one other thing we only need the actual font that we're importing. The second argument here is simply a backup. This is what would be shown if the Roboto slab isn't available. Here we have that, let's bring the Roboto Slab Regular in and paste that in. Everything else on the Lato and here should work. Let's also get rid of our call here so that it's calling it from our own application. If I hit refresh now let's see if this picked it up or not. It appears that it did. Yes. Oh! I'm not sure if this is picking up. Let's see where we may have an error here. I'm going to hit inspect and come down to console. Yes, it looks like we do have an error. It's not finding the fonts right here. That is I believe because we need to add it into our asset pipeline calls. Right here we have blogs. But we also need to add in the ability to take other files in. In this specific case, we're going to have to take fonts in. We've already updated this a few times here but now we can add one more in. Here we can give the command for Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts"). With all of this in place, we need to restart the rails server. Let's see if this is working. Essentially, all this code here is doing is saying I want to make available this fonts directory so that it can be called and used with the asset pipeline. Switch over here, hit refresh and see if that fixes the issue for us or not. That appears to work. Yep everything is working. That is the way that you can get that working and I'm going to push both of these code options up to you because I want you to be able to know you can use a CDN like Google fonts but then you also can store them locally. If you have a very important application you probably want to follow this approach so I'm going to push them both up so you have access to both of those code files. We can cross this off the list and we have a very short video for the next one. We are just about done with this app which is very exciting git commit -m "Integrated custom fonts", git push origin final-changes. I'll see you in the next guide, when we update our seed's file.

Resources