CSS font-smoothing

You might be tempted to use the full capabilities of your browser to do things such as font-smoothing, but it’s not a good idea as it is often overused and the Browser/OS will generally do it’s best.

Both Firefox and Safari have support of this CSS attribute as follows:

font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

NOTE: If you’re using something like Glyphicons (included with Bootstrap) you might have some use for this because of the way that fonts are used for icons.


Content-Security-Policy HTTP Header

There’s yet another new means to ‘help’ client User-Agents with preventing XSS on your websites.

In it’s simplest form you can simply use the following HTTP Header(s), the second one is for earlier versions of Webkit (Chrome/Safari):

Content-Security-Policy: default-src 'self'
Webkit-CSP: default-src 'self'

You can also add to the above to permit assets to load from other sources.
For example, if you were to permit javascript files from example.com you could include:

Content-Security-Policy: default-src 'self'; script-src http://example.com

Additionally, while failures are noted in the client’s browser console (that most users are not aware of), you can have them sent back to your server by adding a ‘report-uri’ attribute with an appropriate handler:

Content-Security-Policy: default-src 'self'; report-uri http://example.com/csp-report.php


Google Web Fonts

The use of non-traditional web fonts was once a very challenging task due to various browser specific implementations. Thankfully Google WebFonts have made this easy enough for most developers to add in a cross-browser manner in a matter of minutes.

WARNING, there are a few considerations to make here…

  1. Some browsers displays a blank space in place of the text that uses the font.
  2. … and then re-render text in the web font once it has loaded

Method 1: (most compatible, but cross-browser loading behavior varies)

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,p { font-family: 'Ubuntu', sans-serif; }

Method 2: (requires javascript, but is consistent cross-browser)

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Ubuntu Mono','Ubuntu' ] }
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
<style type="text/css">
h1 { font-family: 'Ubuntu Mono','Courier New',monospace; }
p { font-family: 'Ubuntu','sans-serif'; }


I’ve done a lot of Internationalization(I18N) and Localization (L10N) work in my various development positions. One particularly troubling area is currency support. Support of number formats is generally well supported (or can be accomplished with some trivial input translation). However, the tricky area come with support for currency symbols, western currencies such as USD (US$) and CAD(C$) and the Euro (EUR or €) are well supported across character sets and fonts some are not. One particular item is for the Indian Rupee (INR). Ubuntu 10.10 is the first operating system to ship with a font that supports this character ₹

Unicode = &#x20b9;

Disabling the HTML <font> tag

Oreilly has a great way of making the <font></font> tag non-functional in cases where the content may contain it (for uncontrollable reasons):

Mind you, this won’t validate properly, but it will disable the usefulness of the tag itself.

Add the following to your CSS definitions

font { color: inherit !important;
background: inherit !important;
font-family: inherit !important;
font-size: inherit !important; }

Recommended ‘simple’ replacement for the tag (when you don’t have time to restructure the entire site) is to use the <span></span> tag with appropriate styles to replace all instances of the <font></font> tag in the markup.