Over the last few months I have been following developments regarding the use of the @font-face feature of CSS3. As we have recently been involved in a project where I saw both an opportunity and a benefit to using @font-face, I have gathered together some information that I think helps clarify how best to use it.

Licencing and Support
Font licensing is a pretty big issue surrounding @font-face, even free fonts, which may stipulate that they are only used on non-commercial sites or have a link back to the author. Some new resources which offer a solution to the licensing issue are appearing, notably Typekit. As they put it its “Simple, bulletproof, standards compliant, accessible, and totally legal.”

At the moment @font-face is best supported by Firefox 3.5, Chrome 3, Safari 3.1, Opera 10 and IE8. The two most commonly used font formats you will see today are .otf (opentype) and .ttf (truetype). To embed a font using these formats you use the following css in your head or an external css file:

@font-face

{
font-family: 'Philosopher';
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: ‘Philosopher’;
font-size: 20px;
}

You could argue that embedding specific fonts is superficial and that all it does is add to the overall aesthetic of the site rather that provide any benefit in terms of accessibility or usability. And if this is the case why bother trying to support older browsers? I guess that’s true but our job as web designers to at least try to provide the richest possible user experience to as many people as possible so why not give it a bash!

EOT (Embedded Opentype)
The font format supported by previous versions of IE is .eot (embedded opentype). You can add a line to your css to include this format with the others. To create the .eot version you first need a .ttf version of your font. If you have this I’ll explain how you you convert to .eot it in a minute but if you only have an .otf then you need to convert it to .ttf first. After a bit of digging I found a hard way and an easy way to do this. The harder way is to install Fontforge and the easy way is Online Font Convertor The Online Font Convertor works but seems to slightly distort some of the characters(at least when I tried it.)

Fontforge and Sygwin
If you want to install Fontforge on a windows machine you first need to install Sygwin which provides a Linux-like environment for Windows which is required to run Fontforge. I found it a bit tricky but this Installing Fontforge article is a good tutorial which explains exactly how to do this.

TTF to EOT
Once you have your .ttf font file you need to convert this to an .eot. Once again I found a few ways to do this. One is using the Microsoft tool WEFT. A lot of people have said WEFT is quite tricky to use but I found this tutorial and it wasn’t too bad. The only problem is that it doesn’t always play nice with every font. When you load in the font you wish to convert it will indicate whether or not it can be converted with a green, yellow or red icon. If it is green or yellow you’re in luck and you can create your .eot file. If it’s red (which I encountered) go to TTF2EOT Online. This tool is great and once it converts your font it even provides the css and instructions on how to embed the font in your page.

Once you have an .otf or a .ttf font aswell as your .eot version you can now embed the font using the following css:


@font-face
{
font-family: 'Philosopher';
src: url("Philosopher.eot");
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: 'Philosopher';
font-size: 20px;
}


Early Chrome Support – SVG
You can improve browser support further by adding an SVG version of the font to the css. This format allows the embedded font to be viewed in Chrome 0.3+. This can be created again using Fontforge from one of your other formats or using a tool called Batik. I found good online tool created by Martin Saulis which he has built using Fontforge and TTF2EOT. The problem with SVG fonts is that they have a fairly large file size but by opening the font in any text editor you can delete the unnessessary characters from the font, greatly reducing the file size. The main elements to delete are the glyph-name=”null” and the hkern elements. By doing this it will reduce the file size with minimal effect to the font.

There are a couple of small issues that have to be considered once you have your SVG file. The SVG must be assigned an id which will be used in the css and html to reference it. This can be done by again opening the SVG file in a text editor and editing the tag and adding an id to it. Another issue is the requirement of an SVG namespace to the file. This also must be added for the font to work and can be added in the svg element in the file.

Bookmark This Post

Hide Sites

One of the important concerns to web designers is striking a balance between the creative aspect of a website in terms of style and media and being able to implement the design into an accessible and standards compliant site which can be read by search engines. Web technologies have come a long way in a short time in helping to achieve this with xhtml, css and javascript providing a more flexible way of realising ideas while maintaining clean, structured code and accessibility standards. More recently newer developments are becoming available which are pushing the possibilities of the web and raising the bar in the flexibility designers and developers have. As long as the ideas keep flowing on what we would like to achieve on the web, the technology will continue to advance inorder to match this.

CSS3

Css3 has been in development for a few years but is now beginning have some of its features supported better. There a number of interesting features which have been developed to meet design trends, so as to make the implementation of these stylings easier, though many of them are still currently unsupported by browsers, especially Internet Explorer. Some of the features include:

- Multi column allows the developer to position blocks of text in several columns similar to print.

- Rounded corners can be achieved on elements by setting a radius on the corner.

- Border images allow the developer to create custom shaped elements by setting graphics for each corner and sides of an element.These 3 features are only currently supported in Firefox and Safari 3.

- Border color allows gradient borders to be used though are currently only supported by Firefox.

- HSL colors have been introduced, which aswell as setting the colour also allows you to set the hue, saturation and lightness of colours, providing a lot more flexibility in colour schemes. So far this is supported by Opera 9.5, Safari 3, Konqueror and Mozilla.

- One of the most popular features of css3 is opacity. This can be set on different elements allowing a gradient effect to be achieved. This is supported by most browsers except Internet Explorer.

- Box sizing is an interesting one as previously padding and borders were always added to the width of an element but now can be added inside a div. Firefox and Safari support this with the prefix -moz- and -webkit- respectively though Opera simply works with box-sizing.

- Font-face was included in css2 but was only supported by Internet Explorer if an .eot font format was used but Safari 3.1 now allows Truetype or Opentype font to be implemented in designs.

Flash accessibility.

Flash has always been a blessing and curse to both developers and users. It can achieve unique interactive experiences for users and bring a site to life but with search engines unable to extract text or links from the file, it has made flash sites often inaccessible and difficult to index. In the last 6 months it was announced by Google and Adobe that the algorithm Google uses is dramatically changing which will allow text and links from flash files to be read and allow sites to be indexed better in search results. Adobe is developing a flash reader for search engines which will allows the files to be read. Another technology which employs Flash and provides developers with more flexibility in terms of typefaces on the web in Sifr. This is a type replacement technology which allows any typeface to be employed in a website. Its fully accessible with all major browsers and can be read by screen readers.

Bookmark This Post

Hide Sites