Tagged: font-family

Be slightly careful when using web fonts

Web fonts make it real easy to use almost any font on your website and that is good. But one thing that webmasters seem to not notice is that web font files are quite heavy and will easily outweigh the rest of an average web page.

As an examle, let's take a look at a new blog I set up recently, Fishing Base Blog. At the moment it uses WordPress' default theme which include the Open Sans font. I have added a background image (46kb) and tracking code for Piwik (21kb). The total size in kb for the frontpage is now 281.5 kb which is not bad by todays standards.

Continue reading

How to organize font-family declarations

While working on already existing code I often find font-family declarations spread throughout hundreds or sometimes thousands of lines of code. This is somewhat frustrating when my task is to change the font families, because I have to search through the CSS to find all the font-family declarations and then build a mental image just to figure out the current system behind the font family usage.

With font-family, you should have a clear plan for your website, and typically use no more than two or three font-families. If not, you will quickly end up with chaos and inconsistency, two qualities you don't want to be associated with your code. I prefer to gather all font-family declarations in the top of my CSS like this:

Continue reading

Beware of narrow fonts

One weird problem that I have observed a few times is that a website has been shown with a narrow font on one computer. While you can say "who cares" as long as it is only one computer, you only test on a few machines anyway so one might be a significant percentage and indicate that you should do something about it.

Continue reading
Written by Comments Off on Beware of narrow fonts Tagged with