Webfontpakket maken
Selecteer TTF-, OTF-, WOFF- of WOFF2-lettertypen om WOFF2-bestanden, CSS en een HTML-voorbeeld te maken. Controleer vóór integratie op een website de voorbeeldtekst en de CSS-instellingen voor naam, gewicht, stijl en weergave tijdens laden. Sla het pakket daarna op als ZIP. Er wordt geen subset van tekens gemaakt.
Wat u kunt doen
Bestanden voor het web bundelen
Maak WOFF2, CSS en een HTML-voorbeeld van TTF, OTF, WOFF of WOFF2. U kunt meerdere lettertypen tegelijk selecteren.
Glyphs en CSS-instellingen controleren
Controleer hoe de geconverteerde lettertypen eruitzien. U kunt zo nodig de namen, gewichten en stijlen voor het web en de weergave tijdens het laden aanpassen.
De set als ZIP delen
Sla de map fonts, fonts.css en preview.html samen op. Gebruik ze met behoud van hun relatieve locaties.
Zo gebruikt u het
Lettertypen samen selecteren
Selecteer lettertypen die u op het web mag gebruiken. Als u meerdere lettertypen wilt gebruiken, selecteert u ze samen.
Weergave en webinstellingen controleren
Voer tekst in om een voorbeeld te bekijken en controleer elk lettertype. Als u de naam, het gewicht of andere opties wilt aanpassen, opent u de CSS-instellingen van dat lettertype.
De kit maken en de ZIP opslaan
Klik op Webfont-pakket maken en sla de gegenereerde webfont-kit.zip op.
Uitpakken en aan een webpagina toevoegen
Pak de bestanden uit met behoud van de locaties van de map fonts, fonts.css en preview.html. Laad de CSS op de pagina waar u de lettertypen gebruikt en gebruik de opgegeven lettertypenamen.
Handig wanneer u
Een website voorbereiden voor publicatie
Uw lettertypen in webformaten en CSS wilt bundelen om de bestanden voor integratie voor te bereiden.
De complete set aan het productieteam overdragen
Meerdere lettertypen, zoals normaal en vet, wilt bundelen en samen met HTML met voorbeeldtekst aanleveren.
Hoe lettertypen en CSS samenwerken
WOFF2 is een webfontformaat
Bereid WOFF2 voor met de oorspronkelijke tekens. Er wordt geen subset gemaakt. De bestandsgrootte verschilt per lettertype.
Namen, gewichten en stijlen in CSS registreren
Deze instellingen bepalen welke aangevraagde stijlen dit lettertype op het web gebruiken. Ze maken de glyphs in het lettertype niet vet of cursief.
Dezelfde naam onderscheiden op gewicht en stijl
De normale en vetgedrukte stijl kunnen dezelfde naam gebruiken, maar de combinatie van naam, gewicht en stijl mag niet dubbel voorkomen.
Weergave tijdens het laden kiezen
Standaard wordt eerst een terugvallettertype weergegeven en zodra het lettertype gereed is, wordt dit vervangen. U kunt het wachten en overschakelen zo nodig aanpassen in de CSS-instellingen.
Relatieve bestandslocaties behouden
fonts.css verwijst naar bestanden zoals fonts/font-1.woff2. Als u de map of CSS verplaatst, moet u de verwijspaden aanpassen.
Veelgestelde vragen
Waar moet ik de gegenereerde bestanden plaatsen?
Pak de ZIP uit en plaats de map fonts, fonts.css en preview.html met behoud van hun relatieve locaties. Laad fonts.css vanaf uw pagina en gebruik de opgegeven lettertypenaam in CSS.
Wat is het verschil met alleen het formaat converteren?
Deze pagina bundelt WOFF2 met CSS en een HTML-voorbeeld. Als u alleen het lettertypeformaat wilt wijzigen, gebruikt u Lettertypeformaat converteren.
Kan ik alleen de tekens behouden die ik gebruik?
Deze pagina maakt geen subset van tekens. De lettertypen behouden de oorspronkelijke tekens.
Maakt een andere gewichtinstelling de tekens vetter?
De instelling bepaalt de font-weight-waarde in CSS. De glyphs in het lettertypebestand worden niet gewijzigd. Gebruik voor vet of cursief een bestand dat die glyphs bevat.
Kan ik meerdere bestanden met dezelfde lettertypenaam gebruiken?
U kunt bestanden met verschillende gewichten of stijlen registreren. Als dezelfde combinatie van naam, gewicht en stijl dubbel voorkomt, controleer dan de betreffende instellingen.
Wat gebeurt er als ik opnieuw lettertypen selecteer?
De huidige set lettertypen en de gegenereerde ZIP worden verwijderd en de nieuw geselecteerde set wordt geladen. Selecteer ook de bestanden die u samen met de nieuwe set wilt blijven gebruiken.
Wat als niet alle voorbeeldtekens worden weergegeven?
Tekens die niet in het lettertype zitten, kunnen in een ander lettertype worden weergegeven. Controleer de ondersteunde tekens en hoe ze worden weergegeven op de plek waar u het lettertype gebruikt.
Wat als een lettertype niet kan worden geladen?
Selecteer opnieuw lettertypen in een ondersteund formaat. Als een bestand in de set niet kan worden geconverteerd of geladen, wordt een gedeeltelijk geslaagde set niet opgeslagen.
Invoer en resultaten
- Invoer
- TTF, OTF, WOFF en WOFF2. U kunt meerdere bestanden tegelijk selecteren.
- Voorwaarden
- Controleer de gebruiksvoorwaarden van de invoerlettertypen, inclusief insluiten op het web.
- Instellingen
- Namen, gewichten, stijlen en weergave tijdens het laden, gebruikt in CSS.
- Uitvoer
- webfont-kit.zip. Bevat WOFF2, fonts.css en preview.html.