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