Monthly Archives: March 2013

Web Fonts – ‘Faux’ Bold and Italic

I have talked about web fonts before, but I ran into a new issue that made me revisit the topic.

The problem came from using a @font-font kit from Font Squirrel. What happened was that I ended up getting “Faux” bold and italics on my web-page. The solution suggested from the Demo.html page that comes from the kit is truly unacceptable if you want your CSS to be sanely maintainable.

What it comes down to is you would need to specify unique font-family anywhere you want bold or italics. You lose the ability for “cascading” and inheritance – some of the things that make CSS nice.

See the screen cast for more information. Here is a Table of Contents in case you don’t need the intro to web fonts that I provide in the beginning:

0:00 to 2:55 Using Google Web Fonts
2:55 to 4:55 Getting fonts from FontSquirrel
4:55 to 6:15 Adding fonts to CSS and showing the ‘Faux’ problem
6:15 to end Solving the ‘Faux’ problem and setting up different weights of your font

See my Github repository for the solution and demo code.

Here is the important snippet of the CSS defining the fonts.

The trick is to call all the definitions the same name. Then specify with “font-weight” or “font-style” the weight and style you want it to represent.

It is quite simple once you “get” it. I would never have thought to do this if I hadn’t found this article to explain the solution.

By the way, on this website I use Myriad Pro hosted by TypeKit. When you use a service like this, just like with Google, they handle the bold and italics better, so you don’t need to worry about this issue.

Outline on Focus

I recently made a small change to this site to try to make it a little more accessible. I haven’t spent enough time thinking about that aspect of my websites. Not because I don’t care, but just because I am always so rushed, I sometimes forget.

I was reading a blog post on The Accessibility Project which reminded me that I wasn’t paying attention to users who like to navigate with the keyboard. That is silly, because I am sometimes one of those people.

Because I spend so much time on the computers, sometimes my hands hurt and I have found the mouse to part of the problem – at least the switching back and forth between keyboard and mouse. So sometimes just using the keyboard to choose a link or menu item is better than the mouse. I am trying to use more keyboard shortcuts in everything I do and use the mouse less.

So I realized this website didn’t handle keyboard navigation very well. If you tabbed through the top menu, you couldn’t see which menu item was “active”. That was simply because I had forgotten to style my a:focus links.

So, I changed all my references to something:hover to include something:focus as well.

.menu a:hover, .menu a:focus { 
  color: #317572; 

I also noticed that Chrome was using an orange glow to outline elements, which doesn’t look all that nice on this color scheme. So I changed the outline on focus to thin dotted which is the default in other browsers, and it is more subtle.

This then made the focus just a little less obvious, so I decided to add a light background color to things that have focus. I had to be fairly specific when determining what got the background color, however, because I didn’t want everything that was an “a” tag to get that color.

So my final code is:

a:hover, a:focus { 
  color: #317572; 
  outline: thin dotted;

/* specific links that should get a background color */
p a:hover, p a:focus, etc. ... { 
  background-color: #EEF7F2;