@font-face er en CSS-regel, der gør det muligt at vise skrifttyper på websider på internettet. Før denne regel fandtes, kunne webmastere bruge et begrænset sæt skrifttyper på deres sider, som er de mest almindelige og installeret på brugernes computere. Med fremkomsten af @font-face kan enhver specifik font nemt knyttes til en hjemmeside.
Hvis du har downloadet skrifttypen på vores hjemmeside, finder du i arkivet med skrifttyper klar CSS-kode, som skal kopieres og sættes ind i CSS-dokumentet, der er knyttet til projektet.
Trin for trin installation
1. Vælg den skrifttype, du ønsker, og klik på "download til hjemmeside".
2. Opret en mappe med skrifttyper i roden af dit websted, og kopier de downloadede skrifttyper.
Åbn dit CSS-dokument, og kopier indholdet af tekstfilen fra arkivet ind i det.
4. Sørg for, at stien til fontmappen er stavet korrekt. Afhængigt af placeringen af den mappe, hvor skrifttyperne er placeret, kan stien indeholde en eller flere prikker.
5. Færdig. Kopier egenskaben med familienavnet, og indsæt den i den selektor, som du skriver stilarterne til.
Hvad hvis jeg allerede har downloadet skrifttypen et andet sted, og jeg gerne vil sætte den ind?
I dette tilfælde skal du finde en fontkonverter på internettet og konvertere din ttf-font (eller otf) til de rigtige formater, nemlig eot, svg, woff og woff2. Dette er for at sikre, at fonten vises og fungerer korrekt i alle browsere såvel som på mobile enheder.
Derefter skal du selv stave @font-face-reglen og respektere dens syntaks.
Syntaksen for @font-face
Reglens syntaks kan groft inddeles i grundlæggende egenskaber og avancerede egenskaber.
Grundlæggende:
- font-family - angiver navnet på skrifttypen.
- src - angiver stien til skrifttypen. Det kan være URL'en til skrifttypen på din hjemmesides server, URL'er til skrifttyper på en andens server (såsom Google Fonts) eller simpelthen navnet på skrifttypen på brugerens computer (Helvetica New Bold, Tahoma, Georgia osv.).
Udvidet:
- font-display - bestemmer, hvordan skrifttypen vil se ud, afhængigt af om den er blevet downloadet og er klar til brug.
- font-stretch - giver dig mulighed for at justere tekstens bredde.
- font-style - bestemmer, om skrifttypen er almindelig, kursiv eller skrå (de to sidstnævnte er ikke det samme).
- font-weight - Indstiller skrifttypens mætning på en skala fra 100 til 900 (100-small, 900-small).
- font-variant - bestemmer, hvordan de små bogstaver skal præsenteres - lad dem være uændrede, eller gør dem alle små (store).
- font-feature-settings - giver dig mulighed for at styre avancerede typografiske funktioner i OpenType-fonte.
- font-variations-settings - tillader kontrol på lavt niveau over variationer af Open Type- og TrueType-skrifttyper ved at angive aksenavne på fire bogstaver.
- unicode-range - specificerer rækkevidden af Unicode-koder (glyffer), der skal bruges i skrifttypen.
Tilslutning af en skrifttype til dit websted med Google Fonts
At bruge Google Fonts er den nemmeste måde at forbinde en skrifttype til din hjemmeside på. Gå ind på deres hjemmeside, find den skrifttype, du ønsker, vælg de rigtige skrifttyper, der skal installeres, og kopier koden.
Den kopierede kode skal placeres i brødteksten i head-tagget på din html-side.
Ulempen ved denne metode er, at hvis du under opbygningen af webstedet har mistet internettet - vil skrifttyperne ikke blive vist og vil blive erstattet med standard, fordi filerne ikke er placeret på den lokale computer og på Googles servere. Der er også en chance for, at problemet opstår igen, når du kommer til kunden for at præsentere layoutet (eller bare for at bekræfte det), og han ikke har Wi-Fi.
