Inklusive anpassade teckensnitt i WordPress-plugins

Ju mer du arbetar med webbutveckling, desto mer sannolikt kommer du att se folk som ber dig att införliva anpassade typsnitt i deras projekt.

Ibland är detta lätt. Om du till exempel arbetar med något som ett Google Web Font, kan du enkelt kopiera koden som krävs för att klistra in i din stilmall.

Ofta ser koden ut ungefär så här :

Och sedan kan du använda den i din stilmall så här :

font-family: 'Roboto', sans-serif;

Men vad händer om någon ger dig en uppsättning teckensnitt som de vill använda i sitt projekt som är i ett filformat och som inte finns på någon typ av innehållsleveransnätverk?

Anpassade teckensnitt i WordPress-plugins

För det första är det värt att notera att för att använda vissa typsnitt i dina projekt måste de falla under en specifik licens. Det här är inte inlägget som kommer att diskutera de olika licenstyperna, men se till att du har behörighet för typsnittet.

För det andra, notera att det finns olika format för typsnitt. I exemplet nedan kommer du att se att jag använder OpenType-formatet. TL;DR-versionen av detta är som följer:

OpenType-formatet är en uppsättning av de befintliga TrueType- och Adobe® PostScript® Type 1-teckensnittsformaten. Det möjliggör förbättrad plattformsoberoende dokumentportabilitet, rikt språkstöd, kraftfulla typografiska funktioner och förenklade teckensnittshanteringskrav.

Om du är intresserad kan du läsa mer här.

För det tredje, när det gäller att arbeta med dessa typsnitt, stilmallar och införliva dem inom ramen för ett WordPress-plugin, tycker jag att det – precis som med allt annat – är viktigt att hålla saker organiserade.

Organisera teckensnitt i en plugin

Inom tillgångskatalogen har jag normalt en css- och en js- katalog. Ibland inkluderar detta även bilder och i det här exemplet inkluderar det även teckensnitt.

När typsnitten väl har placerats i rätt katalog är det väldigt enkelt att inkludera dem i din stilmall. Först definierar du dem så här :

@font-face {
    font-family: GothamLight;
    src: url("../fonts/Gotham-Light.otf") format("opentype");
}

@font-face {
    font-family: ThirstyScriptMedium;
    src: url("../fonts/ThirstyScriptMedium.otf") format("opentype");
}

Och sedan kan du använda dem (tillsammans med en ordentlig reserv) så här :

#search_keywords {
    background: #ffffff;
    color: #151335;
    font-family: 'GothamLight', sans-serif;
}

För att vara komplett är det värt att notera att du helt enkelt kopplar upp stilmallarna som alla andra i ett plugin:

Det är allt.

Ett enkelt inlägg

Visst, allt detta är lätt att spåra men de viktigaste punkterna värda att notera är:

• använd inte olagliga typsnitt,
• organisera dina tillgångar,
• definiera dem och använd dem sedan tillsammans med en riktig reserv.

Och det är allt.