Changing the font

Boilerstrap uses fonts from Google Web Fonts to improve the typography of the theme. The default font is Adobe’s Source Sans Pro, but it’s easy to swap it out for another font. Follow the steps below to customize your Boilerstrap theme:

Step 1 finding a new font

We chose because it is modern, high-quality, looks great and offers a large variety of weights (thicknesses) to work with. While you can use any font at all with Boilerstrap, here are a few recommended alternatives from us to get you started:

Step 2 getting the code

Once you’ve chosen a new font from Google Web Fonts, select as many font weights as you wish to include on your site. For Boilerstrap we went ahead and included all available weights.

Once you have selected all of your desired font weights, you should see a blue box below containing a variety of ways to embed those fonts into your themes. Select the tab named @import and let’s go to the next step!

import-url

Why use Google Web Fonts? Well, they are very skilled at serving those font files properly and quickly—a feat not all web servers do well. Also, in addition to being provided free for use, the font files stored on Google’s servers get updated from time to time meaning higher fidelity fonts and improved loading times.

Step 3 editing typography.css

Now that you have the @import code for your font, replace the line at the top of the /css/typography.css that currently starts with @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro… and replace it with the @import code of your new font

typography

Step 4 updating your font-family:

Now that Boilerstrap is importing the correct font, you only need to replace the font-family: line at the top of /css/typography.css with your new font. Head back over to Google Web Fonts and copy the automatically generated font-family rule for your chosen font to replace where it reads font-family: "Source Sans Pro", sans-serif; in your file.

Now you should have replaced Source Sans Pro with your own custom font.

  • jkinley

    Hi, I just downloaded and setup as child theme, but getting unexpected results. For example, “skip to content” link is showing up in header. Do you have any specific recommendations on how to set this up as a child theme? Or is it business as usual?

    • http://tomhodgins.com tomhodgins

      Hey jkinley, thanks for checking out Boilerstrap!

      I’m not sure how you have it set up as a child theme, Boilerstrap is a full standalone theme that shouldn’t require any other theme installed to run. This site is using Boilerstrap as its main theme to power these demo pages. I suggest re-downloading the files (I just did a nice update before responding to your comment) and installing the files as a regular theme in WordPress using these instructions: https://codex.wordpress.org/Using_Themes#Adding_New_Themes

      We are currently using Github to keep Boilerstrap up to date while we’re working on it, and we still need to get Boilerstrap into the main WordPress theme database after we figure out how we can update the theme through the WordPress updater without overwriting any site-specific customizations users may have made. As it stands right now nothing stored in the ‘css/custom.css’ file will be overwritten when updating Boilerstrap through Git, so you should be good to start customizing your copy of Boilerstrap using the ‘css/custom.css’ file while still being able to keep the rest of the code up to date as we add new features!

      The ‘Skip to Content’ link you are seeing is supposed to be insivible. It’s in the tab-index, so if you were using a screen reader or pressing ‘tab’ to cycle through all of the links on a page it would allow you to skip the menu (which would get annoying to have to do for every page) and jump directly to the content. If you’re seeing the link showing up at all times, that means the CSS files aren’t loaded properly.

  • Scott Dixon

    Thanks for making this. I have two questions, the footer widgets stack, are they supposed to? If so is there a way to make them appear side by side on desktop, then stack on mobile (which they already do). Second question, any way to use glyphicons for menu items? I through adding glyphicon-home to the Title Attribute might add it but it doesn’t. Also noticed there icon (assuming it’s 3 lines) on the mobile button seems broken, I’ve downloaded a fresh copy twice but I’m unable to get it to show, any suggestions?

  • Scott Dixon

    Just an update to my last post, the glyphicons seem to show in IE, but in firefox I see a broken image, in chrome no image. Usually it’s the other way around and IE doesn’t display what it should