Webfont

Font-face webfont generator - genialt værktøj - upload dine fonte og få den konverteret til diverse formater og stylet i én samlet pakke lige til download. Super genialt

http://www.fontsquirrel.com/fontface/generator

Brug egne skrifter på dine Websites 2

Her er en stump CSS, der viser koderne til alle font-typerne.

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('../DroidSerif-Regular-webfont.eot');
    src: url('../DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../DroidSerif-Regular-webfont.woff') format('woff'),
         url('../DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('../DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body, p { 
  font-family: 'DroidSerifRegular', Verdana, Tahoma;
}

<p >Hello world!</p>

Brug egne skrifter på dine Websites

Et forsøg på at ændre skrifttyper på en hjemmeside. Det virker fint i Firefox og Chrome, men ikke i Explorer.

<style type="text/css">
  @font-face {
  font-family: "My Custom Font";
  src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
  font-family: "My Custom Font", Verdana, Tahoma;
}
</style>

<p class="customfont">Hello world!</p>

For understøttelse i IE, skal fonten konverteres til EOT-formatet. Jeg har fundet et glimrende online værktøj til at generere stylesheet'et og font'ne.  Med @font-face Generator kan du uploade dine fonte og automatisk få genereret stylesheet og web-formater af fonten.

Bemærk: At fonten SKAL ligge i samme mappen som den side den skal vises på, ellers virker det ikke

Et hurtigt eksempel kan ses her!