@font-face är en CSS-regel som gör att teckensnitt kan visas på webbsidor på internet. Innan denna regel fanns kunde webbansvariga använda en begränsad uppsättning teckensnitt på sina webbplatser, vilka är de vanligaste och installerade på användarnas datorer. Med tillkomsten av @font-face kan alla specifika teckensnitt enkelt bifogas till en webbplats.
Om du laddade ner teckensnittet på vår webbplats hittar du i arkivet med teckensnitt färdig CSS-kod som ska kopieras och läggas in i CSS-dokumentet som bifogas projektet.
Steg för steg-installation
1. Välj det teckensnitt du vill ha och klicka på "ladda ner för webbplats".
2. I roten på din webbplats skapar du en mapp typsnitt och kopierar de nedladdade typsnitten.
Öppna ditt CSS-dokument och kopiera innehållet i textfilen från arkivet till det.
4. Kontrollera att sökvägen till typsnittsmappen är korrekt stavad. Beroende på positionen för mappen där teckensnitten finns kan sökvägen innehålla en eller flera punkter.
5. Klart. Kopiera egenskapen med efternamnet och klistra in den i väljaren som du skriver stilarna för.
Vad händer om jag redan har laddat ner teckensnittet någon annanstans och vill koppla in det?
I det här fallet måste du hitta en typsnittskonverterare på internet och konvertera ditt ttf-typsnitt (eller otf) till rätt format, nämligen eot, svg, woff och woff2. Detta för att säkerställa att teckensnittet visas och fungerar korrekt i alla webbläsare, samt på mobila enheter.
Du måste sedan själv skriva ut @font-face-regeln och respektera dess syntax.
Syntaxen för @font-face
Regelns syntax kan grovt delas in i grundläggande egenskaper och avancerade egenskaper.
Grundläggande:
- font-family - anger namnet på teckensnittet.
- src - anger sökvägen till teckensnittet. Det kan vara URL:en till teckensnittet på din webbplats server, URL:er till teckensnitt på någon annans server (t.ex. Google Fonts) eller helt enkelt namnet på teckensnittet på användarens dator (Helvetica New Bold, Tahoma, Georgia etc.) .
Utökad:
- font-display - avgör hur teckensnittet kommer att visas, beroende på om det har laddats ner och är klart för användning.
- font-stretch - låter dig justera bredden på texten.
- font-style - avgör om teckensnittet är vanligt, kursivt eller snedställt (de två senare är inte samma sak).
- font-weight - Ställer in mättnaden för teckensnittet, på en skala från 100 till 900 (100-small, 900-small).
- font-variant - bestämmer hur de små bokstäverna ska presenteras - lämna dem oförändrade eller gör dem alla små (versaler).
- font-feature-settings - låter dig hantera avancerade typografiska funktioner i OpenType-teckensnitt.
- font-variations-settings - möjliggör kontroll på låg nivå över variationer av Open Type- och TrueType-teckensnitt genom att ange axelnamn med fyra bokstäver.
- unicode-range - anger det intervall av Unicode-koder (glyfer) som ska användas i teckensnittet.
Ansluta ett typsnitt till din webbplats med Google Fonts
Att använda Google Fonts är det enklaste sättet att koppla ett typsnitt till din webbplats. Gå till deras webbplats, hitta det typsnitt du vill ha, välj rätt typsnitt att installera och kopiera koden.
Den kopierade koden ska placeras i brödtexten i head-taggen på din html-sida.
Nackdelen med denna metod är att om du under skapandet av webbplatsen har förlorat internet - kommer teckensnitten inte att visas och ersättas av standardteckensnitt eftersom filerna inte finns på den lokala datorn, utan på Googles servrar. Dessutom är chansen stor att när du kommer till kunden för en layoutpresentation (eller bara för konformation) och han inte har Wi-Fi, kommer problemet att hända igen.
