Een gedownload lettertype kan ongebruikt blijven omdat CSS een ander lettertype selecteert, de tekst buiten het bereik ervan valt of de weergaveperiode is verstreken. Begin op een Mac met het inspecteren van het lettertype waarmee één label daadwerkelijk wordt weergegeven en volg daarna de selectie en het laden terug.

Deze handleiding is bedoeld voor iemand die een webpagina beheert, een geslaagd lettertypeverzoek ziet maar toch terugvaltekst te zien krijgt. Gebruik Chrome op macOS voor de inspectiestappen. Het fictieve label Panel 204 en de familienaam Sample Sans hieronder illustreren de diagnose; ze verwijzen niet naar een specifieke website.

Wat bewijst een geslaagde download eigenlijk?

Behandel de diagnose als vier afzonderlijke vragen: Is de bron opgehaald? Is er een bruikbaar lettertype geregistreerd? Heeft CSS dat lettertype voor deze tekens geselecteerd? Heeft de renderer het weergegeven? Een preload van een lettertype start vroeg met ophalen; de aanwezigheid ervan bewijst niet welk lettertype de zichtbare tekst levert. MDN: rel="preload"

Lettertype-overeenkomst wordt bepaald op basis van tekst, niet simpelweg op basis van gedownloade bestanden. De browser houdt rekening met de gevraagde lettertypefamilies en -eigenschappen en controleert vervolgens welke tekens worden ondersteund. Daardoor kan één label meerdere lettertypen gebruiken, en kan een ander deel van de pagina een lettertypedownload veroorzaken die weinig zegt over het label dat je onderzoekt. W3C: CSS Fonts Module Level 4, lettertype-overeenkomst

Gebruik deze beslissingstabel om de volgende controle te kiezen. Het is een diagnostisch hulpmiddel op basis van de gedocumenteerde grenzen van laden en overeenkomst, geen verslag van gemeten browserresultaten.

Waarneming Volgende controle Wat dit helpt onderscheiden
Berekende familie verschilt van de bedoelde familie Volg de winnende CSS-declaratie Probleem met de cascade of de doelkeuze
Berekende familie klopt, weergegeven lettertype verschilt Inspecteer de beschrijvingen van het lettertype en de tekendekking Probleem met selectie of terugval
JavaScript meldt dat een lettertype is geladen, maar het ontbreekt in de lettertypeset van het document Inspecteer de registratiecode Laden zonder registratie
Lettertype verschijnt na opnieuw laden, maar ontbreekt bij het eerste bezoek Inspecteer font-display en de timing van het laden Gedrag van de weergaveperiode
Gewone tekst werkt, canvastekst blijft onveranderd Inspecteer de tekenvolgorde en de canvaslettertype-instellingen Afzonderlijke tekenbewerking

Welk lettertype geeft het doellabel daadwerkelijk weer?

Druk op de betreffende pagina op Command + Shift + C en selecteer de tekst. Selecteer in Elements het kleinste element dat het betreffende label bevat. Open Computed en scrol naar Rendered Fonts. Chrome documenteert deze weergave als de plek waar je de lettertypen kunt inspecteren die de weergegeven tekst leveren. Chrome DevTools: naslaggids voor CSS-functies, Chrome DevTools: andere effecten toepassen

Noteer het weergegeven lettertype en of de bron lokaal is of een netwerkbron. Noteer ook de berekende waarden van font-family, font-weight en font-style. De berekende familie is de gevraagde stapel; het resultaat van de weergegeven lettertypen geeft aan welke lettertypen de glyphs hebben geleverd. Alleen op het uiterlijk afgaan levert zwak bewijs op, omdat twee lettertypen er vergelijkbaar uit kunnen zien. Chrome DevTools: welk lettertype is dat?

Als het bedoelde lettertype voor de betreffende tekst wordt weergegeven, richt het onderzoek dan op het specifieke verschil in uiterlijk, zoals gewicht of functies. Ontbreekt het, ga dan hieronder verder. Houd de oorspronkelijke tekst en viewport ongewijzigd tijdens het testen, zodat je de waarnemingen kunt vergelijken.

Vraagt de effectieve CSS om het bedoelde lettertype?

Inspecteer in Computed de effectieve lettertype-eigenschappen en gebruik daarna Styles om de bijbehorende declaraties te vinden. Chrome maakt onderscheid tussen deze weergaven: Styles bevat overschreven declaraties, terwijl Computed de waarden toont die daadwerkelijk zijn toegepast. Inspecteer het tekstelement zelf wanneer een kaart meerdere labels bevat; de lettertypedeclaratie van een bovenliggend element is onvoldoende bewijs voor het onderliggende element. Chrome DevTools: naslaggids voor CSS-functies

Controleer eventuele winnende font-shorthands en ook de afzonderlijke eigenschappen. Bijvoorbeeld: font: 16px sans-serif selecteert een generieke familie en reset weggelaten onderdelen van de shorthand, waaronder gewicht en stijl. Ook eigenschappen zoals font-feature-settings en font-variation-settings worden gereset. Herstel de declaratie die verantwoordelijk is voor de onverwachte waarde en inspecteer daarna opnieuw. MDN: font

Vergelijk vervolgens de gevraagde familie met de beschrijving font-family in de relevante @font-face-regel. Deze beschrijving bepaalt de CSS-familienaam waarmee naar het lettertype wordt verwezen; de bestandsnaam is niet de naam die je in de lettertypestapel van het element moet zetten. Controleer de regel die aan de browser is geleverd, inclusief src, het gewicht, de stijl en eventuele opgegeven bereiken. MDN: @font-face

Het ondersteunde gewichtsbereik van een variabel lettertype kan met twee waarden worden opgegeven, terwijl een statisch lettertype één gewicht kan aangeven. Zorg dat deze beschrijvingen overeenkomen met de geleverde bron. Een afwijking verdient onderzoek, maar verklaart terugval niet automatisch: bij het zoeken naar een lettertype houdt de browser rekening met alternatieven als een exacte stijl niet beschikbaar is. MDN: @font-face, W3C: overeenkomst van lettertypestijlen

Kan een lokaal lettertype voorrang krijgen?

Inspecteer src op een alternatief met local(). Op een Mac waarop dat lettertype is geïnstalleerd, kan de browser de lokale kopie gebruiken terwijl een apart vooraf geladen webfont ongebruikt blijft. Open in Chrome het paneel Rendering, schakel Disable local fonts in en laad de pagina opnieuw om dit te isoleren. Vergelijk Rendered Fonts voor en na de wijziging en herstel daarna de instelling. Deze test richt zich op bronnen met local() in @font-face-regels. Chrome DevTools: andere effecten toepassen

Is het lettertype geladen en geregistreerd in het juiste document?

Een lettertype dat is gemaakt met new FontFace() kan volledig zijn geladen voordat het aan een lettertypeset wordt toegevoegd. Voor weergave in een document moet het worden toegevoegd aan document.fonts. Inspecteer het laadpad van de applicatie op beide bewerkingen; alleen het oplossen van de laadbelofte van het lettertype voltooit de registratie niet. MDN: CSS Font Loading API

De volgende complete diagnosedcode voor de console geeft een overzicht van de lettertypen die in het huidige document zijn geregistreerd. Voer de code uit in de consolecontext van de betreffende pagina. De code leest de set zonder laden te starten of stijlen te wijzigen; hij identificeert geen weergegeven glyphs. Het browserafhankelijke gedrag is hier niet uitgevoerd.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Gebruik de inventarisatie om een ontbrekende registratie te onderscheiden van een geregistreerd lettertype dat ongebruikt blijft. Onderzoek bij een vermelding met de status error eerst de laadfout voordat je de typografie aanpast. Een vermelding met status loaded bevestigt de laadstatus, maar de selectie van het lettertype hangt nog steeds af van het element en de tekst. MDN: CSS Font Loading API

Beschouw document.fonts.check() niet als bewijs van weergave. Het kan true retourneren, zelfs voor een niet-bestaande familie. Het optionele tekstargument beperkt overeenkomst op basis van opgegeven Unicode-bereiken en test niet de dekking van afzonderlijke glyphs. Ook wordt document.fonts.ready opgelost nadat het laden en de lay-out voor gebruikte lettertypen zijn voltooid; het bevestigt niet dat elk opgegeven lettertype is weergegeven. MDN: FontFaceSet.check(), MDN: Document.fonts

Dekt het lettertype de tekens die je test?

Controleer zowel de CSS unicode-range als de daadwerkelijke lettertypebron. De beschrijving bepaalt welke tekens een lettertype mag gebruiken. Door de beschrijving uit te breiden ontstaan geen ontbrekende glyphs: de tekenset van het lettertype blijft onderdeel van de overeenkomst. MDN: unicode-range, W3C: overeenkomst van lettertypestijlen

Neem als voorbeeld een regel die beperkt is tot U+0030-0039. In Panel 204 vallen alleen 2, 0 en 4 binnen dat bereik. De letters en de spatie vallen er niet binnen. Een download die door de cijfers wordt geactiveerd bewijst dus niet dat het lettertype het hele label kan weergeven. MDN documenteert dat een in aanmerking komend teken ervoor kan zorgen dat de volledige lettertypebron wordt gedownload. MDN: unicode-range

Dit zelfstandige JavaScript-voorbeeld maakt dat onderscheid zichtbaar. Het kan zonder voorbereiding in een browserconsole of Node.js worden uitgevoerd. De deterministische berekening van het bereik is uitgevoerd voor het getoonde voorbeeld.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Als het bereik benodigde tekens uitsluit, corrigeer dan een onjuiste beschrijving of lever een subset aan die deze tekens bevat. Gebruik de oorspronkelijke tekst waarbij het probleem optrad om het resultaat te controleren. Ga er niet van uit dat een iteratie over een tekenreeks een test van tekstvormgeving is: bij combinatietekens zijn clusters vereist en de standaard houdt waar nodig rekening met informatie over tekstvormgeving. Houd reeksen intact wanneer je de weergave vergelijkt. W3C: lettertype-overeenkomst en clustervergelijking

Is de weergaveperiode van het lettertype verstreken?

Inspecteer font-display wanneer de familie en dekking er goed uitzien. optional heeft een uiterst korte blokkeerperiode en geen wisselperiode. fallback heeft een korte wisselperiode. Een bron die na de toepasselijke periode binnenkomt, kan er dus voor zorgen dat de terugvaltekst zichtbaar blijft tijdens die paginalading. swap staat na de aanvankelijke blokkeerperiode een onbeperkte wisselperiode toe. MDN: font-display

Wijzig voor een gecontroleerde diagnose tijdelijk de betreffende regel naar font-display: swap in de stylesheet die wordt aangeboden en herhaal de omstandigheden van de eerste paginalading. Als het lettertype nu verschijnt nadat het is geladen, is timing een aannemelijke verklaring. Bepaal of die latere visuele verandering geschikt is voor de pagina voordat je de instelling behoudt. Herhaal zowel een eerste paginalading als een herlading vanuit de cache; een gecachet resultaat alleen reproduceert de oorspronkelijke aankomsttijd niet.

Wat verandert er als een bibliotheek of canvas de tekst weergeeft?

Als de pagina al Font Face Observer gebruikt, inspecteer dan de waargenomen familie en de opties weight, style en stretch. De documentatie beschrijft een loader en monitor, vereist de gebruikelijke @font-face-regels en een aangepaste testreeks wanneer het lettertype de standaardtesttekens niet bevat. De standaardtime-out is drie seconden. Een time-out van de observer en het venster van font-display in de browser zijn afzonderlijke omstandigheden. Documentatie van Font Face Observer

Als diagnostische gevolgtrekking geldt dat je na een succesbericht van een observer het doelelement moet inspecteren. De beschikbaarheid van één lettertype monitoren bewijst niet dat de winnende CSS van het element erom vraagt. Een andere loader installeren helpt weinig als de onbeantwoorde vraag is welk lettertype werd weergegeven.

Canvas introduceert een afzonderlijke tekengrens. De tekencontext heeft een eigen instelling font, aanvankelijk 10px sans-serif; een ongeldige toewijzing wordt genegeerd. Een CSS-familie instellen op het canvas-element bewijst daarom niet welk lettertype de context gebruikt. Inspecteer de waarde die aan de tekencontext is toegewezen en de volgorde waarin laden en tekenen plaatsvinden. WHATWG: canvastekststijlen

Wacht voor canvastekst tot het bedoelde geregistreerde lettertype is geladen, stel het lettertype van de context in en teken vervolgens de betreffende scène opnieuw met de gebruikelijke tekenroutine van de applicatie. Eerder getekende pixels krijgen geen nieuw lettertype zodra er een lettertype binnenkomt. Bij de tekstvoorbereiding voor canvas wordt bovendien uitgegaan van een hypothetische oneindig brede regelbox, waardoor een geslaagde canvastypecontrole niet bewijst dat een label op een webpagina met beperkte breedte op dezelfde manier wordt afgebroken. WHATWG: tekst voorbereiden en tekst tekenen

Hoe bevestig je de oplossing?

Ga terug naar het oorspronkelijke label en herhaal de waarneming waarmee het probleem aan het licht kwam. Controleer de berekende aanvraag, het weergegeven lettertype en de relevante tekens onder de oorspronkelijke laadomstandigheden. Teken bij canvas de tekst opnieuw voordat je vergelijkt. Houd een beknopt overzicht bij van het element, de gevraagde eigenschappen, het daadwerkelijk weergegeven lettertype, de bron en de wijziging die het probleem oploste; zo is de diagnose reproduceerbaar.

Je bent klaar wanneer je kunt uitleggen waarom het lettertype ongebruikt bleef en het bedoelde resultaat voor de betreffende tekst kunt laten zien. Een gecorrigeerde familiedeclaratie, een juiste subset, een geregistreerd lettertype, een passend weergavebeleid of een opnieuw getekende scène op het juiste moment pakt telkens een andere grens aan. Kies de oplossing die door je waarnemingen wordt ondersteund.

Bronnen