rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Use custom @font-face in CSS3

A great new feature in CSS3 is the ability to import your font to your website without creating an image. This allows the website to not use the default font like arial, tahoma or verdana which are native to most Internet browsers.

@font-face url or src will load the external site to download the required font and then use it.

For example:

@font-face  {
  font-family: 'squealer';
  src: url('/path/to/font/squealer-webfont.eot');
  src: url('/path/to/font/squealer-webfont.eot?iefix') format('eot'),
  url('/path/to/font/squealer-webfont.woff') format('woff'),
  url('/path/to/font/squealer-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
h1 { font: normal 50px "squealer"; }

and then use it

<h1>Use custom @font-face in CSS3</h1>


Use custom @font-face in CSS3

Cross Browser Compatibility

Each browser supports different font formats:

note: using all types makes your site compatible with most users.

This is an elegant solution for replacing images and make your site loads faster!