@font-face embedding in detail

Zoltan Hawryluk walks us on how to embed @font-face via CSS, which’s supported in “Firefox 3.5+ , Safari 3.1+, Opera 10+, Google Chrome, and Internet Explorer 4.0+. Although technically embedding any font inside a web page is possible, but its important to have a license for commercial font. Here’s an example using via CSS: @font-face { font-family: 'Droid Sans'; src: url('/shared/fonts/DroidSans/DroidSans.eot'); src: local('Droid […]

Zoltan Hawryluk walks us on how to embed @font-face via CSS, which’s supported in “Firefox 3.5+ , Safari 3.1+, Opera 10+, Google Chrome, and Internet Explorer 4.0+. Although technically embedding any font inside a web page is possible, but its important to have a license for commercial font. Here’s an example using via CSS:

@font-face { font-family: 'Droid Sans'; src: url('/shared/fonts/DroidSans/DroidSans.eot'); src: local('Droid Sans'), local('Droid Sans'), url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype'); } /* Bold declaration only for non-IE browsers */ @font-face { font-family: 'Droid Sans'; src: local('Droid Sans Bold'), local('Droid Sans-Bold'), url('/shared/fonts/DroidSans/DroidSans-Bold.ttf') format('truetype'); font-weight: bold; } body { font-family: "Droid Sans", "Arial", "Helvetica", sans-serif; }

Full Article@font-face