Fontsquirrel

Font-face opsætning
@font-face {
font-family: 'Min_font';
    src: url('../fonts/name/name.eot') format('embedded-opentype');
    src: url('../fonts/name/name.eot?#iefix') format('embedded-opentype'),
         url('../fonts/name/name.woff') format('woff'),
         url('../fonts/name/name.ttf') format('truetype'),
         url('../fonts/Min_font/Min_font.svg#Min_font') format('svg');
}
Grafik for stier til font-face
Placering af font-face på serveren

Fonten "name" har denne placering på serveren

Manglende filendelser

Ofte vil en gratis font kun være tilgængelig med enkelt endelse som for eksempel '.ttf'. For at tilgodese alle typer browsere, er det derfor nødvendigt at konvertere fonten ved hjælp af en online generator.

En udmærket generator - som i øvrigt også tilbyder gratis fonte - er Fontsquirrel

Læs meget mere om om CSS-kommandoen 'font-face' i artiklen "Introduktion til font-face" - ved hjælp af CSS kan jeg bruge alle typer fonte.

En anden relevant artikel er "Typografi og websafe fonte".

Fontsquirrel og konvertering

Efter at have fundet og downloadet en font fra internettet, kan jeg ved hjælp af Fontsquirrel generere de manglende fil-endelser, så fonten kan vises i alle browsere:

Oprettelse af mapper:
  1. Opret i root af serveren (public html) eller tilsvarende lokalt på computeren (localhost) en mappe fx 'fonts'
  2. opret i mappen 'fonts' en ny mappe fx 'name'
  3. Placer den downloadede font i mappen 'name'
Indstillinger i Fontsquirrel:
  1. Åbn Fontsquirrel
  2. Tryk på ”Expert” for at justere indstillinger:
    • ”Font formats” - sæt kryds i ”SVG”
    • ”X-height matching” - vælg højde svarende til en af de nævnte websafe fonte – husk 62.5% hvis jeg har angivet dette i CSS-selectoren 'html' til brug for em- / rem-værdier
    • ”Protection” - sæt kryds
    • ”Advanced options” > ”Font name suffix” - dette felt bør være tomt
    • ”Shortcuts”- sæt kryds
    • ”Agreement” – sæt kryds
Konvertering i Fontsquirrel:
  1. Upload fonten fra placeringen i mappen 'name'
  2. Tryk på ”download your kit”
  3. Gem zip-filen fra Font Squirrel i mappen 'name' og se filerne ved at højreklikke og trykke ”open” (afhængigt af software til zip)
  4. Kopier disse filer og placer dem i mappen 'name':
    • .eot
    • .svg
    • .ttf
    • .woff
Opsætning af stierne:
  1. Opret et nyt stylesheet eller kopier CSS fra toppen af artiklen ved at klikke på knappen "CODE" og vælge "Font-face opsætning"
  2. Indsæt navnet på fonten i stierne til fonten's forskellige formater

Nu mangler jeg blot at bestemme hvor fonten skal bruges fx:

p {
       font-family: 'Min_font', Arial, sans-serif;
}