When you focus a link or some other focusable HTML element, you’ll get some more or less ugly outline which might not quite be what you want. In Firefox it’s for example a dotted border:
To remove this outline e.g. for all links, simply add this CSS:
a { border: 0; outline: 0; }
This won’t work for any element in Internet Explorer. You might have to add some none standard attribute:
<a href="#" hidefocus="true">some link</a>
I recently stumbled over several posts and pages about web fonts and the @font-face CSS rule which was implemented in Firefox 3.5. So I thought I share some useful links about that topic.
First of all, what are web fonts all about? For several years the standard way for specifying a font for your web page is the CSS font-family attribute, used like this:
body { font-family: Verdana, Arial, sans-sarif; }
with that definition the browser will try to display all text within the body tag using Verdana as font. If the system doesn’t know about Verdana the browser will fall-back to Arial and finally to a font without sarifs. This gives you a little control about the font the user will see, but sometimes it’s just not enough.
When producing print media designers and authors are used to having access to a wide variety of different fonts. Wouldn’t it be dreamy if we had these capabilities also on web pages?
This is where @font-face comes into play:
@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif }
You can embed the font directly into your web page and this way specify which font the user will see. Due to licensing you can’t just use any font. There are a couple of free or open source ones though:
For a bigger choice you can search Typekit a commercial service with a big library of different fonts.
Not every browser perfectly supports the @font-face rule, so you want to check out this page: @font-face browser support. Web Font Specimen helps you to study how your font settings will look like across different browser.
You’ll find the spec for web fonts here: CSS Fonts Module Level 3. I already linked to Webfonts.info above. It’s a good wiki about the whole web font topic. This article at A List Apart is also useful: CSS @ Ten: The Next Big Thing
I’m aware that this is not a in depth study of the topic, but that wasn’t my intention. It’s meant just as a collection of a few links to get started quickly.
I'm a Software Developer, currently working at