Posts Tagged ‘@Font-Face’

Public Service Announcement: Watch Your @font-face Font-Weight

CSS | Posted by Keefr January 8th, 2012

This time of year, everyone is worried about losing weight, so it seems only fitting that css-tricks.com came out with a nice little public service announcement about using those @font-face declarations and not adding a weight value. Read the article below for the PSA details.

Public Service Announcement: Watch Your @font-face Font-Weight

The New Bulletproof @Font-Face Syntax

Browsers, CSS | Posted by Keefr February 14th, 2011

Ah… this looks so clean, and I can attest that this is working everywhere I’ve tried it. Every browser (including IE as far back as IE6) is able to display non-web safe fonts using this.

As long as you have the rights to display a given font on the web, this syntax, along with a tool like @Font-Face Generator allow your web browsers to break out of the arial, verdana, etc. monotony.

The New Bulletproof @Font-Face Syntax

@Font-Face Generator

CSS | Posted by Keefr January 28th, 2011

In the on-going attempt to up my game on the web design and development front, I’ve spent time earlier in the week seeking out a way to reliably provide non-web safe fonts that are simultaneously search engine optimized/accessible. It seems our little browsers have matured to the point where all the major players have support to embed fonts. The only hiccup — and there are always are is that different browsers support different file formats.

In my search, I came across several converters that go from a single font file to another, but then came across fontsquirrel.com, which has a nice looking and efficient tool to create all the file formats you need. The end result is all the files you need to support all the current generation fonts — and beyond. Using its default “optimal” settings worked great for me. I did removed the .svg references though, as I didn’t feel I needed to keep them for older versions of iOS. What else is amazing, is this works even in Internet Explorer 6!

If you find it useful, donate and make sure this little processor-intensive web application continues to exist as we need it.

@Font-Face Generator