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!
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
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.