How to Add a Custom Font to an Angular 2 Application
In this screencast I walk through how to integrate a custom font into an Angular 2 application and then how to utilize the font throughout the application components.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Another thing I love about angular development is how easy it is to add custom fonts. I want to show you how you can do this. And I went to fonts.google.com and you can go and pick anyone that you want out.

The one that I'm picking out for this course is Ubuntu. And if you type in the search engine up there it'll bring it up and it's here on the left-hand side. If you click on it he'll take you to its show page and you can see all of the different items and see what it looks like. I'm a big fan of it, and it also shows you some other kinds of fonts that it combines with nicely. But I'm going to use Ubuntu for the entire application at least for right now.

I'm going to click select this font in the top right-hand corner and now on the bottom right-hand side, it shows me the font I selected. And the easiest way to bring these in is to just grab the standard import.

large

So copy this and switch over to the code and now open up the index.html file, it's located at the root of your document and paste it right above the stylesheet.

large

This is important! Make sure you don't place it after the style sheet because if you do then this is not going to be available.

So save that and the next thing we're going to do is grab this font so that we can put this in the CSS

large

Close out of google fonts and now inside of the styles CSS file, we're going to place this in the body because I want this font to apply to everything on the site. Now I'm going to put that right under our background-color.

large

Now watch what happens when I hit save. Pay attention to our localhost and what this font looks like. Hit save, and there you go.

Now we have a new font, and we also have a new font on our tabs and this looks a lot better. We have it everywhere else. I really like this Ubuntu font. Usually, I'll have one font for headings and another one for body and paragraph tags. But as far as I can see it actually looks pretty good just like this. So I'm going to keep this for right now somewhere down the line we might want to change it.

But right now I'm loving this. Anyway that is how easy it is to add a custom font in an angular 2 application.

Resources