O'Reilly logo

Learning Web Development with Bootstrap and AngularJS by Stephen Radford

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing Bootstrap's styles

Now that we're using the Bootstrap source, we can dive into any file to customize it. Less extends upon CSS and gives us new features that Bootstrap takes full advantage of.

Typography

Bootstrap uses Helvetica, perhaps the most popular typeface in the world. To give our application a bit of character, let's take a look at how we can swap this out for something from the Google Fonts library at https://www.google.com/fonts. Take a look through and find something you like. For now, we're going to use Roboto, a humanist sans-serif typeface.

Add the font to your collection and select the light, normal, and bold styles, as seen in the following screenshot:

Copy the @import line and include it at the top of the bootstrap.less ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required