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
Caberet ABCDEFGHIJKLMNOPQRSTUVWXYZ . abcdefghijklmnopqrstuvwxyz
!@#$%^&*()<>{} 1234567890
How quickly daft jumping zebras vex

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

danielbk 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