Brugerdefinerede skriftfamilier

Tailwind leverer tre hjælpeklasser til standardskrifttypefamilier: font-sans, font-serif og font-mono. Hver af dem svarer til en nøje udvalgt systemskrifttypefamilie, der ser godt ud på alle operativsystemer uden at kræve download af skrifttyper. I de fleste projekter vil du gerne erstatte eller supplere disse med en brandet webskrifttype, der giver projektet en særegen typografisk identitet.

Google Fonts er den mest almindelige kilde til gratis webskrifttyper. Gå til fonts.google.com, og vælg en skrifttype, der passer til dit brand. Populære valg til brugerfladeprojekter omfatter Inter til rene, moderne brugerflader, Geist til tekniske produkter, Playfair Display til redaktionel elegance og JetBrains Mono til kodeeditorer. Vælg de tykkelser, du faktisk bruger (normal 400 og semibold 600 er tilstrækkeligt i de fleste tilfælde).

Når du har indlæst skrifttypen via et <link>-tag eller CSS @import, skal du registrere den i tailwind.config.js under theme.extend.fontFamily. Angiv skrifttypens navn nøjagtigt, som det vises i Google Fonts (inklusive mellemrum, hvis det er relevant), som det første element i et array med skrifttypefamilier. Medtag altid reserveskrifttyper — systemskrifttyper, der bruges som sikkerhed, hvis webskrifttypen ikke indlæses.

Når skrifttypen er registreret, kan du bruge hjælpeklassen font-{key} til at anvende den. Hvis du har udvidet sans, henviser font-sans nu til din valgte skrifttype. Hvis du har tilføjet en ny nøgle som display, er hjælpeklassen font-display. Anvend skrifttypefamilien på det højeste overordnede element, så den nedarves overalt, og tilsidesæt derefter bestemte sektioner efter behov.

Hvis du vil gøre din valgte skrifttype til standard overalt uden at tilføje font-sans til hvert element, skal du tilsidesætte theme.fontFamily.sans (uden for extend) for helt at erstatte standardfamilien. Anvend derefter font-sans én gang på dit body-element, så al tekst, der nedarves fra body, bruger din brugerdefinerede skrifttype uden yderligere klassenavne.

I Next.js-projekter skal du bruge modulet next/font i stedet for CDN-links til Google Fonts. Det downloader skrifttyper ved build-tid, leverer dem fra dit eget domæne, fjerner eksterne forespørgsler og forhindrer layoutforskydning med automatiske justeringer af skriftstørrelsen. Generér navnet på CSS-variablen, og giv det videre til din Tailwind-konfiguration ved hjælp af variablen, så der oprettes en tæt integration mellem Next.js' skrifttypeoptimering og Tailwind.

Når du bruger købte eller brugerdefinerede skrifttyper, skal du hoste dem lokalt og definere dem med en CSS @font-face-regel. Placér skrifttypefilerne i din offentlige mappe, og referér til dem med absolutte stier. Brug font-display: swap til straks at vise reserveskrifttyper, mens den brugerdefinerede skrifttype indlæses, så usynlig tekst under indlæsningen undgås. Registrér derefter skrifttypefamilien i din Tailwind-konfiguration som normalt.

Når du har indstillet skrifttypefamilien, kan du styre tykkelsen med Tailwinds font-{weight}-hjælpeklasser. Almindelige tykkelser omfatter font-normal (400), font-medium (500), font-semibold (600) og font-bold (700). Sørg for at indlæse de specifikke tykkelser fra Google Fonts, som du vil bruge — hvis du anmoder om en tykkelse, der ikke er indlæst, genererer browseren den kunstigt, hvilket giver tekst af dårlig kvalitet.

Variable skrifttyper indeholder alle tykkelser (og nogle gange også bredder og kursiv) i én enkelt fil. Det reducerer antallet af HTTP-forespørgsler, samtidig med at hele tykkelsesområdet understøttes. Indlæs en variabel skrifttype én gang, og brug en hvilken som helst Tailwind-hjælpeklasse til skrifttykkelse uden at bekymre dig om, hvorvidt den specifikke tykkelse blev anmodet om. Mange moderne Google Fonts tilbyder nu variable versioner — se efter aksesyntaksen ital,wght@ i URL'en.

Tailwind leverer hjælpeklasserne antialiased og subpixel-antialiased, som styrer, hvordan skrifttyper gengives på skærmen. Anvend antialiased globalt på dit body-element for at aktivere gråtoneudjævning, som får moderne webskrifttyper til at se skarpere og tyndere ud på skærme med høj DPI. I de fleste Tailwind-projekter tilføjes antialiased som en grundstil sammen med erklæringen af skrifttypefamilien.

Kontrollér, at dine brugerdefinerede skrifttyper indlæses korrekt, ved at åbne Chrome DevTools, gå til fanen Network og filtrere efter Font. Du bør kunne se dine skrifttypefiler på listen. Vælg en tekstnode i panelet Elements, og kontrollér fanen Computed — egenskaben font-family bør vise navnet på din brugerdefinerede skrifttype som den valgte skrifttype, ikke reserveskrifttypen. Test ved flere visningsstørrelser og forbindelseshastigheder for at opdage problemer med indlæsningen.

I denne lektion lærte du at registrere brugerdefinerede skrifttyper i theme.extend.fontFamily som et array med reserveskrifttyper, indlæse Google Fonts via et CDN-<link>-tag eller bruge next/font til optimeret indlæsning i Next.js og anvende antialiased globalt for skarp skrifttypegengivelse. Nu skal vi tilføje brugerdefinerede afstandsværdier for at udfylde hullerne i Tailwinds standardskala.