Internet Explorer is the only browser that supports EOT, a font format that has digital rights management. That way you can make sure that your $200 font isn’t downloaded and used by everybody on the internet.

But like I said: IE is the only browser that can understand that file type. So Mozilla apparently implemented some sort of protection against font hijackers: It will only accept fonts from domains that specifically allow fonts to be downloaded. In case of Apache you have to add the following code below to the .htaccess file. I found it on Open Font Library.

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

This does not help you prevent people from stealing your font, but it will protect you from web developers who want to add the URL to the font on your domain in their font-face declaration. It’s not really a solution if you ask me. It seems more like a gesture to the creators of fonts.

It appears you could replace the asteriks with the domain of your website, but in my case (http://electricspace.blogspot.com/) did not do the job.

Related posts:

1. The trouble with @font-face
2. No sign of @font-face in Chrome 4
3. My favorite for converting fonts to EOT
4. Webfont pitfalls
5. New web font service: Ascenderfonts.com

Most of the time that’s not what you want. Using tag names as selectors can also make design changes troublesome if you have to add more divs and need to give it a different styling. But since IE7 we can use new selectors that help us to build much more delicate CSS selectors. Those new selectors are:

• Child selector: .parent > .child
• First child selector: .parent .child:first-child
• Adjacent selector: .sibling + .sibling
• First child selector: div:first-child
• Attribute selectors: div[id]

Now you can style the following HTML with just a single class:

HTML:

	This is some title
	Lorem ipsum
	Lorem ipsum
	Lorem ipsum
	Some body text with lots of lorem ipsums in it
	Some body text with lots of lorem ipsums in it
	Lorem ipsum

CSS:

.container span {
	font-family: sans-serif;
}
.container > span:first-child {
	font-size: 1.5em;
	font-weight: bold;
	font-family: serif;
}
.container > span > span {
	font-style: italic;
}
.container > span > span > span {
	font-weight: bold;
}
.container > span + span {
	display: block;
	margin-top: 0.5em;
}
.container a:nth-child(2) {
	font-weight: bold;
}
.container a {
	display: block;
	color: #f0f;
}
.container a:nth-child(4) ~ a {
	font-size: 0.9em;
}

The advantage is that you can, as you can see, style whole blocks of HTML code with just one class. In theory you could even use no classes at all. Without ‘class’-attributes on every element, the HTML code looks just a little bit more cleaner and readable. You can also use those and other selectors in javascript libraries like jQuery to select particular HTML elements. Since most libraries are cross-browser you don’t have to worry if a selector is or isn’t supported by a browser. Consider this piece of code in jQuery:

jQuery(".container a:nth-child(4) ~ a").click( function() {
	alert('hello world');
})

That’s all nice, but should I use it?

No. I use them some times, but I try to stay away from it if possible. The problem with these selectors is that they rely so much on the structure of the HTML that it becomes harder to change the HTML structure. If you take another look at the HTML and CSS that I showed as an example in the beginning of the article, it’s clear that you can’t add a few links or spans without having to change the CSS. Add some advanced jQuery selectors in the mix and you may have locked the HTML structure forever since no-one dares to change it.

Should I discard those new selectors then?

Not necessarily. Sometimes you just have no choice if you for some reason are not able to change the HTML. My personal guideline is that styling has to be predictable. So when you edit some piece of HTML code, the styling should behave as expected. That means that you don’t style your HTML in a way that the text-color of the 4th span is red.

So what can be styled predictable? If you ask me advanced selectors shine when the structure is relatively fixed. Lists are a good example. Just take a look at these code blocks below. The styling will behave normal, regardless what you do with the HTML.

HTML:

Lorem
Ipsum
Dolor

Sit
Amet

CSS:

ul.list li + li {
	margin-top: 10px; /* adds top margin to all list items except the first */
}
ul.list > li {
	font-weight: bold; /* styles only the first level list items differently */
}

Javascript:

jQuery("ul.list li:nth-child(even)").addClass("zebra"); // adds zebra striping to a list

HTML elements you can easily apply advanced selectors

Besides ul, you can style uls, dls, tables. That doesn’t mean that other elements should only be styled with classes. There are always some exceptions to the rule. Just let your common sense be the judge.

Related posts:

1. How to overcome the limits of CSS in Internet Explorer 6
2. For the sloppy clickers
3. Alternative for :nth-of-type() and :nth-child()
4. Hack: how to enable :first-child in IE6
5. What you can’t do in IE’s Quirks Mode

In order to use webfonts in your website you have to convert regular fonts to Microsofts EOT format. Normally I would use the online version of ttf2eot, which works reasonably well. As long if you have a TTF. If you have another type of font like a OTF, you have to find another converter first.

WEFT

In case ttf2eot fails with a particular font (like in my case) I grudgingly use Microsofts WEFT tool. I dislike WEFT for its instability and weird workflow/interface. But last time I tried it, it didn’t do a good job at all. Only 3 of the 4 fonts I had to convert to EOT were recognized and none of that 3 fonts worked in IE.

Fontsquirrel

Then while looking for a manual on WEFT, I came across the free @font-face Kit Generator of Fontsquirrel. And man, did that save the day. Uploading and converting the fonts was very easy. On top of it, you get an example web page packed in a zip with the webfonts in it. It looks something like the screenshot below. The service can also convert fonts to WOFF (Firefox) and SVG (Chrome & iPhone).

Fontsquirrel not only converts your fonts to EOT, but also shows an example how it would look like in your browser in various font sizes.

What to look out for in Fontsquirrel

The only thing that did go wrong was the hinting. If I chose the default option “Use existing hints” the letter “B” did not render well as you can see in the screenshot below. When I chose to remove the hinting, the conversion was successful.

Fontsquirrel too can get it wrong. Always check all the types

The problem in the previous piccture was cleard by removing all hints.

Related posts:

1. The trouble with @font-face
2. Test: Popular professional fonts as webfont
3. List of web fonts services and resources
4. Interview with Ethan Dunham of Fontsquirrel and Fontspring
5. Webfont pitfalls

A few new and cool CSS3 styles become realistic options if you are designing website. That is: as long as you combine them with IE’s counterpart filter.

The list of things that Safari, Chrome and Firefox support is getting larger and larger. Not all functionality is that interesting since we still have to make sure that IE users receive a functional site. And if you’re building something for a customer, you have to make sure that the website looks like what the customer expects it to look like. Most of the time that means that the website must be more or less an exact copy of the designs in Photoshop.

But what is easily forgotten is that for years Internet Explorer sort of supports some CSS styles through the proprietary filter property. I mostly use filter for setting opacity or forcing alpha channels in a PNG24, but when I saw a text shadow in a website I realized that IE can do that trick already for years. So I came up with this list of things that should work on almost any browser:

• Text shadow
• Box shadow
• Blur
• Gradient background
• Opacity
• PNG24 alpha

A little on browser support

A little warning about the “works in”-lines you’ll seewith each example. I didn’t dig very deep to see which version of Opera started to support text-shadow. If see in a support chart that Opera 9.62 supports text-shadow, I haven’t dug deeper to if it was also supported in Opera 9.61. Especially when I relate it to the small share of people who use that browser. If you can point a source that speaks of an earlier version, I’m more than happy to correct the article.

Things you can do with CSS and filters combined

Text shadow

Works in IE 5.5+, Firefox 3.1b+, Safari 3+, Chrome 2+ and Opera 9.62+
Used sparingly can create a nice subtle effect and is a great way to make something a bit more stylish. Watch out with loss of anti-alias. More on that issue at the end of the article.

Text-shadow in IE8

Text-shadow in Firefox 3.5.5

.textShadow {
	width: 250px;
	text-shadow: 1px 1px 1px #cccccc; /* CSS3-compatible browsers */
	filter: dropshadow(color=#cccccc, offx=1, offy=1) /* IE */
}

Blur

Works in IE 5.5+, Firefox 3.1b+, Safari 3+, Chrome 2+ and Opera 9.62+
This one is a bit of hack: CSS3’s text-shadow is misused to create a blur. It was a trick I saw on www.css-tricks.com (hence the name, I guess). And although you can see the differences between the two screenshots, both are definitely blurs. A conditional comment was used to make the text in IE a bit darker so it would match with other browsers.

Blur in IE8

Blur in Firefox 3.5.5

.blur {
	width: 250px;
	color: #ddd;
	text-shadow: 0 0 2px #aaaaaa;
	text-shadow: 0 0 4px #aaaaaa;
	text-shadow: 0 0 6px #aaaaaa;
	filter:
		progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
		progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

<!--[if IE]>
	<style type="text/css">
		/* This style is for IE browsers only by
		   using IE's Conditional Comments */
		.blur {
			color: #aaaaaa;
		}
	</style>
<![endif]-->

Opacity

Works in IE 5.5+ and in all major browsers for years and is safe to use
Definitely the most used combination of CSS and IE’s filter. I mostly use it to make the website almost invisible in favor of an absolute placed div which floats like popup window on top of the greyed out website.

Opacity 0.5 in IE8

Opacity 0.5 in Firefox 3.5.5

.opacity {
	width: 250px;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8+*/
	filter: alpha(opacity=50); /* IE7 and lower */
}

Gradient

Works in IE 5.5+, Firefox 3.6+, Safari4, Chrome 3+
The soon to be released Firefox 3.6 supports gradient background. Safari and Chrome already supports that cool CSS3 feature. Although you can do more with CSS3’s background gradient than IE’s filter, there’s nothing to stop you from using a simple gradient. Well, poor browser support may stop you. Firefox 3.6 still has to be released and Opera does not seem to support gradients at all.

So the browser support for gradients is less than desirable. But since all major browsers except Opera now supports gradients in their latest versions, it will become a useful styling tool soon.

Background gradient in IE8

Background gradient in Chrome 3.0

.gradient {
	background: -moz-linear-gradient(top, bottom,from(#cccccc),to(#888888));
	background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#888888)) no-repeat;
	background; -o-gradient(top, bottom,from(#cccccc),to(#888888));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcccccc, endColorstr=#ff888888)"; /* IE8+ */
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcccccc, endColorstr=#ff888888); /* IE7 and lower */
}

Box shadow

Works in IE 5.5+, Firefox 3.6+, Safari 3, Chrome 1
If you look at the screenshots below you see a striking difference in what is called a “Shadow“. IE’s box shadow looks more like the right and bottom side of a 3D object than a real life shadow. CSS3’s box-shadow provides a shadow that’s much more realistic.

.boxShadow {
	-moz-box-shadow: 5px 5px 5px #888;
	-webkit-box-shadow: 5px 5px 5px #888;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=125,strength=5)"; /* IE8+ */
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=125,strength=5); /* IE7 and lower */
	background: #cccccc;
}

Use alpha channel in PNG24 images

Not really a CSS feature, neither something that lacks in modern IE browsers. But it is dearly missed in IE6. The only way to use alpha channels in IE6 (although many have found different ways apply it) is by using the filter’s AlphaImageLoader. Although this filter can save the day, it has many bugs you need to be aware of:

• It can only be used as a background image.
• You cannot position it like a normal background image, nor can the image repeat itself on the x or y axis.
• Links or form elements inside a box with a transparent PNG24 are not clickable. You have to make sure that such elements have a parent that has position: relative.
• Having lots of relative positioned elements scattered around can add extra complexity to your website if it has absolute positioned items floating on top of each other as well.
• You’ll lose text anti-alias.

This technique is only needed in IE6. Other modern browsers use the alpha channel as it ought to be.

.imageAlpha {
	display: block;
	width: 250px;
	height: 40px;
	padding: 5px 10px;
	background: #aaf url(alpha.png) 0 0 repeat-x; /* PNG24 image with alpha layer that works in all modern browsers */
}
* html .imageAlpha { /* these styles are only picked up by IE6 */
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png', sizingMethod='scale')
}

Filter bugs

Filter can clear Cleartype

The main drawback of using IE’s filter is that in some cases the element that has a filter style in IE, will lose it’s anti-aliasing. That may not sound like a big deal, because we have lived for a long time without Microsoft’s Cleartype, but it can get real ugly with larger fonts as you can see in the screenshots below. If you use a filter and it does remove the Cleartype, it’s best to keep the font-size 16 pixels or lower.

Filters can only be applied to boxes

Filters can only be applied to block elements like div or p and they need a width or height. If not, the filter won’t work. The exception to the rule is IE8, which can show filter effects without a width or height.

View demo

No related posts.

If custom fonts are so great, Why isn’t anyone using it?

In case you’re already in the process of removing that lame Times New Roman from your computer: look around on the web. There’s almost no website to be found that shows non-standard fonts through the @font-face technique. They all use images or sIFR. So why is no-one using @font-face? I decided to set up a @font-face test page and try it in different browsers and found a few shortcomings:

No Chrome

Although Chrome is able to show custom fonts it’s disabled by default as reported on opentype.info. It appears that you can enable it by adding the option -enable-remote-fonts. It’s not clear if remote fonts are going to enabled by default soon, but I guess the Chrome team first have to address security issues that come with the use of webfonts.

Text flashing in Firefox

When loading the page, Firefox first shows the text in a default font. Only after the TTF or OTF is loaded, it will change the text accordingly. Even when I reload the page, the texts in the web page flashes from web font to TrueType font. Although it’s not a a nice effect, it’s no disaster either.

IE7+ in high security level

IE7 and IE8 in the highest security level will not show custom fonts, but will show a webfont. I’ve never ever had IE in the highest security level, but I reckon some will. And I guess many large organizations will have IE set to the highest security level. So be prepared that some people won’t see your carefully crafted website like you intended.

Deal breaker: IE6 in high security level

Well, until now the worst that could happen is that a browser won’t show a custom font but will default to a system font installed on your computer. But using custom fonts in IE6 is close to impossible. IE supports @font-face since IE4, but after the release of IE6 Microsoft decided to crank up the security. This resulted in a dialogue box that nicely asks if you’d like to download the custom font that might be a security breach. No problem. Until you click a link. Or even refresh the page. You’ll get that dialogue box once again. Huh? Didn’t I just answer that question? I’m still on the website, so why do I have to decide once again if I want to download a font that’s most likely still in my cache?

There goes your usable website down the drain. Like I said: I don’t think that many people will have their security set that high, but it still is a real deal breaker. I suggest that it’s best to show no custom fonts at all in IE6. You can do that by loading an alternate CSS file with conditional comments (tip of a colleague of mine). No fancy fonts is still better than the risk of scaring away visitors.

Last but not least: Converting fonts to EOT

Like I said earlier: Microsoft does not support TTF or OTF. That’s because if you link your CSS to a font file it has to be downloadable for anyone. That’s sour if you just paid a few hundred bucks for some premium font. Not to mention for the persons or companies who made that font. So Microsoft came up with a font format that’s not usable as a regular font and that’s restricted to some specific list of domains. Perfect.

But WEFT, the program to create EOT font files that Microsoft publicized, is awkward in use (if you ask me) and just doesn’t work on my Vista PC. It crashes before I’m able to convert a single font. There is an open source program called ttf2eot and there are even websites that convert fonts with that program like the one on www.kirsle.net. But ttf2eot is still version 0.0.2-2, so that sounds very alpha to me although it seems to do a good job. So be sure to check first if you are able to convert a font before you promise something to the costumer.

An other way to protect the authors of fonts (and yourself as a user that paid a lot of money) is the use of webfont services that supply the raw font. That way you can use a specific font without having to worry that you become an unintentionally illegal provider of premium fonts.

But it will still change the web

So there are still some hurdles to overcome. But it’s clear that it won’t take long before the web will be significantly different from what we know now because the use of custom fonts. Although I’m convinced that with the plethora of available fonts, system fonts like Arial will stay an all-time favorite for a long time.

Update

I had some good feedback (see comments) with some great links:

• ttf2eot tutorial
• Font squirrels font font-face generator
• How to use CSS font-face
• PHP font replacement

Related posts:

1. Implementing font-face cross domain
2. No sign of @font-face in Chrome 4
3. My favorite for converting fonts to EOT
4. Webfont pitfalls