A Small Tip for Advanced Performance Optimization or Theme Development
I often come across websites loading a ton of kilobytes just to display a single bold font. Sometimes, massive font files are loaded for just one tiny word in bold tucked somewhere on the page.
Many times, you can avoid this performance hit by using a fake bold with text-shadow. Strip away the heavy bold font files and trick the user instead. It’s not the end of the world if it’s not a true bold.
Just a couple of lines of CSS are enough:
b, strong, .bold {
text-shadow: 0.2px 0 currentColor, -0.2px 0 currentColor, 0 0.2px currentColor, 0 -0.2px currentColor;
}It doesn’t matter if the font doesn’t support bold. With this little CSS trick, the browser will create a fake bold, and everyone’s happy.
Of course, feel free to choose your own selectors. In this example, I used b, strong, and .bold, which are the most common. By increasing the 0.2 values, you can make the bold effect even stronger.
Please compare the boldness of the following two sentences.
This is a bold given by the font.
This is a bold created using text-shadow
Here is a picture that shows the same sentences, but zoomed in.
They will not be exactly the same, and sometimes having the perfect boldness is more important than performance. However, many other times you can save many kilobytes without users noticing the difference.
Performance optimization is often a game of adding a little to save a lot. Simply removing resources doesn’t always fully solve the problem. Sometimes you can improve performance just by adding something smart without removing anything (we’ll cover that in a future post).
I hope this post helps contribute to saving some energy on the planet. Enough with all those kilobytes of font files traveling across the internet just for a couple of bold words!
Do your part. Use the CSS trick above instead of loading all those extra font files.