Home
» WEB
»
WebFonter: Bekijk FontShop-lettertypen op elke website – wat werkt er nu?
WebFonter: Bekijk FontShop-lettertypen op elke website – wat werkt er nu?
WebFonter was een browsertool waarmee je FontShop-lettertypen direct op een website kon uitproberen voordat je een lettertype kocht. Ontwerpers konden hiermee koppen en tekst ter plekke aanpassen in plaats van een lettertype te beoordelen aan de hand van een statisch voorbeeld. Die oorspronkelijke workflow is nu verleden tijd: de webwinkel van FontShop sloot in 2023 en het voormalige WebFonter-adres verwijst nu door naar een informatiepagina van FontShop in plaats van naar een installatietool. Je kunt lettertypen nog steeds bekijken via MyFonts en experimenteren met de typografie van je website in de ontwikkelaarstools van je browser.
Kun je WebFonter nog steeds installeren?
Vertrouw niet op oude installatie-instructies voor WebFonter. Volgens de officiële FAQ van Monotype over de sluiting van het platform is het e-commerceplatform FontShop.com op 15 december 2023 stopgezet . Het oorspronkelijke WebFonter-webadres leidt nu naar de informatiepagina van FontShop, die klanten doorverwijst naar MyFonts. Er kon geen ondersteuning voor een WebFonter-extensie of -bookmarklet worden gevonden. De oude instructies voor de Chrome-extensie en -bookmarklet moeten daarom worden beschouwd als een weergave van hoe het product werkte, en niet als een werkende installatiehandleiding.
Wat WebFonter oorspronkelijk deed
Het grootste voordeel van de tool was dat je een lettertype in context kon bekijken. In plaats van een apart lettertypevoorbeeld te openen, kon een ontwerper een echte pagina bekijken en de typografie ervan aanpassen, terwijl de lay-out zichtbaar bleef.
Open een website. De oorspronkelijke tool werd aangeboden als Chrome-extensie en als bookmarklet voor andere browsers. Het werd beschreven als bruikbaar op live en lokaal gehoste websites, mits de lettertypeservice bereikbaar was.
Kies een lettertypefamilie. Met de optie 'Lettertypefamilie wijzigen ' kon je lettertypen bekijken en doorzoeken in de FontShop-catalogus. Na het kiezen van een lettertypefamilie werd de paginavoorvertoning bijgewerkt.
Stijlen toewijzen en aanpassen. De oorspronkelijke interface begon met kopteksten en hoofdtekst, maakte het mogelijk om andere elementen toe te voegen en bood een 'Tweak' -functie voor grootte, regelafstand en spatiëring.
Een lettertypekiezer op websiteniveau illustreert het soort contextuele vergelijking waarvoor WebFonter is ontworpen.
Dit zijn historische beschrijvingen van functies, geen bevestigde actuele menu's. In sommige oude recensies werd ook een sneltoets Ctrl+H genoemd om de WebFonter-elementen te verbergen. Vermijd dit advies in een moderne browser: Ctrl+H opent normaal gesproken de browsegeschiedenis, tenzij de pagina of tool dit onderschept.
Hoe test je vandaag nog FontShop-lettertypen op een website?
De FontFont-collectie van FontShop is nu beschikbaar via de officiële FontShop-informatiepagina en MyFonts . De volgende aanpak scheidt het ontdekken van lettertypen van het testen op de pagina; in tegenstelling tot de oude WebFonter is het geen FontShop-voorbeeldweergave die met één klik direct op de website te zien is.
1. Test het lettertype met je eigen woorden.
Zoek een geschikte lettertypefamilie op MyFonts. Voer in de voorbeeldweergave van de lettertypefamilie of individuele stijl een daadwerkelijke kop, navigatielabel of alinea uit uw project in. Volgens de FAQ van MyFonts kunt u de grootte en kleuren van de voorbeeldweergave aanpassen en de ondersteunde OpenType-functies inspecteren. De functie Albums helpt u ook bij het verzamelen van lettertypen om ze naast elkaar te vergelijken. Bekijk verschillende diktes: een aantrekkelijk lettertype voor de weergave is mogelijk niet prettig voor lange alinea's.
Vergelijk verschillende lettertypen, zowel qua stijl als qua grootte, voordat je het definitief voor de pagina-indeling kiest.
2. Controleer de tekst die u wilt wijzigen.
Open je website in Chrome, klik met de rechtermuisknop op een kop of alinea en kies 'Inspecteren' . In het paneel 'Elementen ' wordt het geselecteerde HTML-element weergegeven; in het paneel 'Stijlen' worden de CSS-regels getoond die erop van toepassing zijn. Je kunt ook de elementkiezer gebruiken om tekst op de pagina te selecteren. Raadpleeg de handleiding 'Inspectiemodus' van Google voor meer informatie over de verschillende bedieningselementen.
Bekijk een koptekst en zoek de bijbehorende instellingen voor lettertype, lettergrootte en regelhoogte in het deelvenster Stijlen.
3. Experimenteer tijdelijk met de typografie.
In Elementen → Stijlen kunt u een bestaande font-family- declaratie bewerken of er een toevoegen aan het geselecteerde element. Test bijvoorbeeld Georgia, serif als een lokaal beschikbare vervanging voor een serif-richting en experimenteer vervolgens met font-size , line-height of letter-spacing . Wijzigingen zijn meestal direct zichtbaar, maar ze zijn geen permanente aanpassing aan uw gepubliceerde website. Google legt deze instellingen uit in de CSS-referentie van DevTools .
Belangrijk: Het invoeren van de naam van een commercieel lettertype in CSS zorgt er niet automatisch voor dat het lettertype wordt gedownload of geladen. Om het daadwerkelijke commerciële lettertype op uw pagina te zien, moet het al beschikbaar zijn via een correct gelicentieerde en geladen lettertypebron of een toegestane lokale installatie. Anders toont de browser een alternatief. Verwar een voorbeeldweergave van een alternatief niet met het lettertype dat u wilt kopen.
Vergelijk dezelfde kop en alinea in twee verschillende typografische uitvoeringen en let daarbij op tekstterugloop en hiërarchie.
4. Controleer de licentie voordat u de software implementeert.
Een gratis preview in de storefront is geen licentie om de lettertypebestanden op een openbare website te hosten. MyFonts legt uit dat webfonts worden ingesloten via @font-face en een passende webfontlicentie vereisen; toegestane domeinen en paginaweergavevoorwaarden zijn afhankelijk van de licentie die voor dat product wordt aangeboden. Bekijk de licentie- informatie van de lettertypefamilie en uw aankoopvoorwaarden voordat u bestanden in productie neemt. Een desktoplicentie alleen dekt niet automatisch het insluiten op het web.
Waarop te letten voordat je een definitief lettertype kiest
Aanpassing van de koptekst: Wordt de titel automatisch aangepast aan de schermbreedte van zowel desktops als mobiele apparaten?
Leesbaarheid van de tekst: Zijn de kleine lettergroottes, regelafstand en alineadichtheid prettig?
Gewicht en tekens: Zijn de vetgedrukte, cursieve, leestekens en taalsymbolen die u nodig hebt beschikbaar?
Werkelijke laadtijd: wordt het daadwerkelijke gezicht weergegeven, of is dit slechts een alternatief van de browser?
Licentie: Is het aangeschafte abonnement geldig voor gebruik op uw website?
Als een wijziging geen effect lijkt te hebben, controleer dan of een specifiekere CSS-regel uw bewerking overschrijft, of het lettertype daadwerkelijk is geladen en of u het juiste pagina-element hebt geselecteerd. Test met meerdere viewport-breedtes. De oorspronkelijke aantrekkingskracht van WebFonter lag in de directe context; tegenwoordig biedt de combinatie van een MyFonts-voorbeeld met tijdelijke bewerkingen in de DevTools een praktische manier om een weloverwogen typografische keuze te maken zonder te beweren dat de stopgezette tool nog steeds beschikbaar is.