xy.css

Limitless design possibilities with custom fonts. There are thousands of quality, open-source fonts available for your designs. CSS’ @font-face media query enables designers to include custom fonts into your designs in two easy steps. First define your font’s name and location via @font-face:

@font-face {
   font-family: 'ForqueRegular';
      src: url('Forque.eot');
      src: url('Forque.eot?iefix') format('eot'),
           url('Forque.woff') format('woff'),
           url('Forque.ttf') format('truetype'),
           url('Forque.svg#webfontXpDLxgU1') format('svg');
           }

That enables us to use the custom font just like any other, by adding its name to font-family:

.class { 
	font-family: ForqueRegular, Helvetica, sans-serif; 
	font-size: 3em;
	line-height: 1;
	}

The other fonts are fallbbacks for browsers that are unable to display our custom font. We can streamline our code by combining these three properties using font shorthand notation:

.class { font: 3em/1 ForqueRegular, Helvetica, sans-serif; }