Using @font-face in CSS

Why use @font-face if we have Cufon, sIFR, and using text in images?

A few benefits of leveraging @font-face for custom fonts:

  • Full searchability by Find (ctrl-F)
  • Accessibility to assistive technologies like screen readers
  • Text is translatable, through in-browser translation or translation services
  • CSS has full ability to tweak the typographical display: line-height, letter-spacing, text-shadow, text-align, and selectors like ::first-letter and ::first-line.

Add @font-face in project

At its most basic, we declare a new custom remote font to be used like so:

@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Summary

Webfonts deliver quite a bit of freedom to designers and with upcoming features like discretionary ligatures and stylistic alternates, they will have a lot more flexibility. For now, you can feel confident implementing this part of CSS3 as it covers 98% of deployed browsers.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.