Web Fonts
Når du bruger en web font, er der 2 muligheder:
(a) Cloud tjenester er det nemmeste - og sikrer at fonten fungerer i stort set alle browsere og platforme.
(b) Du kan også bruge en font fil, som du selv uploader sammen med sitet, men:
- 1. Sørg for at du har ret til at bruge den
- 2. Brug mindst 2 versioner af fonten, fx woff og truetype (se forneden)
1. Cloud services, fx:
Google Fonts (Raleway)
ÆØÅæøå!?#;:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Adobe Edge Fonts (Alegreya)
ÆØÅæøå!?#;:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Font Library (Beon Regular)
ÆØÅæøå!?#;:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. @font-face embedded fonts:
Filtyper:
- WOFF (The Web Open Font Format) - anbefalet, virker i alle moderne browsere - men ikke alle servere.
- WOFF2 - bedre komprimering, anbefalet, virker i alle moderne browsere - men ikke alle servere.
- TTF - anbefalet, ældre format som er fortsat velunderstøttet - se caniuse.com
- EOT - ikke anbefalet, kun nødvendig for IE ældre end IE9
- SVG - ikke anbefalet som font format
Font filtyper kan konverteres med fx onlinefontconverter.com
NB: check om fonten kan klare de danske bogstaver!
NB: check om den aktuelle server kan håndtere woff fonts!
NB: brug mindst 2 filtyper: woff (eller woff2) og truetype!
WOFF 2 med TTF fallback - anbefalet!:
Propaniac (befonts.com)
ÆØÅæøå!?#;:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
font-family: propaniac;
src: url(fonts/propaniac.woff2) format("woff2"), url(fonts/propaniac.ttf) format("truetype");
}
.propaniac{
font-family: propaniac, serif;
}
Tests med kun 1 filtype:
TTF:
Branda (befonts.com)
ÆØÅæøå!?#;:
Bemærk at Branda ikke kan klare de danske bogstaver.
WOFF:
Dumb2 (fontsquirrel
.com)
ÆØÅæøå!?#;:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
