Back To Top

@Font-Face { }

Here I am playing around with @Font-Face {} CSS3 value. I want to see what needs to be done to make the fonts show up in the 3 main browsers that I use. Google Chrome, Morzilla FireFox, and Internet Explorer. In the table below you will see trhe name of the font that I added and on the right a sentence with symbols of what it looks like when printed out in the browser that you are using.

The basic format that I am using looks like

@font-face { font-family: A_Bit_Empty; src: url('A_Bit_Empty.eot?') format('eot'), url('A_Bit_Empty.ttf') format('truetype'); font-weight: normal; font-style: normal; } You can make the url's absolute or relative paths. The eot format is good for Internet Explorer whilt the ttf format works in most other browsers.




@Font-Face {} Name Font style
A_Bit_Empty ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

A_Damn_Mess ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

A_picture_alphabet ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Abilene ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

AguafinaScript-Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

AlexBrush-Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Amadeus ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Aquiline ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

AquilineTwo ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Arggotsc ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Arizonia-Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

BLOCKUP_ ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

BRUSHSTP ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

BadEscher ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Basic_Sans_SF ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

BickhamScriptStd-Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Bickham_Script_Two ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

BlackCasper ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Bleeding_Cowboys ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

Buffet_Script ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex


  • the < tt > tag changes the font to Teletype
  • the < b > tag changes the font to BOLD
  • the < small > tag changes the font to small
  • the < em > tag changes the font to italic