Thursday, August 4, 2011

Font embedding with css: the @font-face selector ... and more


Option One:
/* first for IE 4–8 */
@font-face {
  font-family:Covered By Your Grace;
  src: url("CoveredByYourGrace.ttf");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family:Covered By Your Grace;
  src: url("CoveredByYourGrace.ttf") format("truetype");
}

Option Two:
@font-face {
   font-family: 'Covered By Your Grace'; /* Font file name that you can find on photoshop */
   src: url('coveredbyyourgrace-webfont.eot');
   src: url('coveredbyyourgrace-webfont.eot?#iefix') format('embedded-opentype'),
        url('coveredbyyourgrace-webfont.woff') format('woff'),
        url('coveredbyyourgrace-webfont.ttf') format('truetype'),
        url('coveredbyyourgrace-webfont.svg#CoveredByYourGraceRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

Font Converter:
If you have any file font just upload it on below website and get a web font kit with tiff, eot and woff
http://www.fontsquirrel.com/fontface/generator

No comments:

Post a Comment