Back To Top
Regular Fonts @Font fonts A-B @Font fonts C-D @Font fonts E-F @Font fonts G-Z

@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