Using @font-face in CSS

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

  • 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

@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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hooks Pattern

EC2 user data for install Nodejs and CodeDoploy agent

Should you migrate?

Should I learn React Or AngularJS?

Reboxed customer Care number/8584892730//8389959685/Reboxed customer Care…

How To Create a Simple Store in Angular

What Is The Scope In JavaScript

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.

More from Medium

Essential CSS Tutorial — Part 3

22 Pustaka CSS Untuk Desain Situs Web

How to add Tailwind CSS 3 to a Hugo website in 2022?

CSS (Cascading Style Sheets)