Att använda utvalda typsnitt på sin hemsida kan addera en känsla av professionalism. Men hur går man tillväga för att ladda upp och använda ett eget typsnitt som inte finns i menyn, utan att behöva använda ett tredjepartsplugin? I den här artikeln går vi igenom en träffsäker metod som alltid fungerar.
Varför använda egna typsnitt?
Många webbplatser förlitar sig på standardtypsnitt som Arial, Roboto eller Open Sans., eller somoss själva på Poppins. Genom att använda ett mer sofistikerat typsnitt kan du ge din hemsida en unik touch och förbättra varumärkesprofileringen. Det kan också bidra till läsbarheten.
Hitta ett typsnitt du tycker om
Google Fonts – Många open source typsnitt som kan laddas ner i WOFF2 format.
Font Squirrel – Har en sektion med gratis kommersiellt licensierade typsnitt som kan laddas ner i WOFF eller WOFF2.
DaFont – Ett stort bibliotek av gratis typsnitt, men kolla licensvillkoren innan du använder dem kommersiellt.
Vad är skillnaden på WOFF och WOFF2?
WOFF (Web Open Font Format) och WOFF2 är båda webboptimerade typsnittsformat, men det finns några skillnader:
WOFF: Ett äldre format som komprimerar TrueType (TTF) och OpenType (OTF) typsnitt för webbanvändning.
WOFF2: En nyare version som använder bättre komprimering, vilket gör filstorleken upp till 30% mindre än WOFF. Det laddas snabbare och är standard i moderna webbläsare.
WOFF2 rekommenderas för bättre prestanda, men det är bra att inkludera WOFF som en fallback för äldre webbläsare.
Konvertera TTF till WOFF2
Hittar du inte typsnittet du gillar i WOFF2 format kan du konvertera din TTF fil till WOFF2 på FontConverter.io.
Ladda upp typsnittet till ditt mediabibliotek i WordPress
När du saknar behörighet att ladda upp filen
Om du stöter på meddelandet ”Uppladdningen av ”DITT TYPSNITT.woff2” misslyckades. Du har inte behörighet för att ladda upp denna filtyp.” när du försöker ladda upp ditt typsnitt så kan du tillfälligt tillåta behörigheten genom att lägga in en rad kod längst ner i din WP_config.php – men kom ihåg att ta bort koden när du är klar med din uppladdning. Detta är viktigt så inte obehöriga kan ladda upp skadliga filtyper på din hemsida senare.
Tillfällig kod att skriva in i WP-config för att tillåta behörigheten:
define('ALLOW_UNFILTERED_UPLOADS', true);Använd typsnittet över hela hemsidan med CSS
När typsnitts filerna är uppladdade behöver de definieras i CSS. Detta görs genom att använda @font-face-regeln.
Gå till Utseende → Anpassa → Extra CSS, eller redigera style.css i ditt child theme, eller i anpassad CSS i just det elementet du jobbar i.
Lägg till följande kod, men uppdatera koden så det passar ditt specifika typsnitt med namn och URL:
@font-face {
font-family: 'TYPSNITT-NAMN';
src: url('https://DIN-URL.se/wp-content/uploads/MittTypsnitt.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6, p, a, span, li {
font-family: 'TYPSNITT-NAMN', sans-serif;
}Innan CSS:
Efter CSS: Pacifico typsnitt uppladdat och inlagt med CSS
Koden jag använder:
@font-face {
font-family: 'Pacifico';
src: url('https://www.wpassistans.se/wp-content/uploads/2025/02/Pacifico-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6, p, a, span, li {
font-family: 'Pacifico', sans-serif;
}Vill du använda typsnittet på utvalda ord?
För ovan bild använde jag följande kod:
HTML:
Vi hjälper dig med <span class="pacifico">design, prestanda</span> och <span class="pacifico">funktionalitet</span>CSS:
@font-face {
font-family: 'Pacifico';
src: url('https://www.wpassistans.se/wp-content/uploads/2025/02/Pacifico-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.pacifico {
font-family: 'Pacifico', cursive;
}Mall för att ställa in din specifika konfiguration:
HTML:
Ditt anpassade typsnitt hamnar <span class="DITT-ID">HÄR</span>CSS:
@font-face {
font-family: 'NAMNET PÅ DITT TYPSNITT';
src: url('URL-TILL-DITT-TYPSNITT') format('woff2');
font-weight: normal;
font-style: normal;
}
.DITT-ID {
font-family: 'NAMNET PÅ DITT TYPSNITT';
}Vill du ha hjälp att anpassa din specifika kod? Välkommen att kontakta oss på WPAssistans.se så hjälper vi dig.
