Weblettertypen gebruiken met Adobe Muse

In deze zelfstudie laat ik u zien hoe u weblettertypen gebruikt in uw Adobe Muse-projecten. We behandelen fontopties die worden aangeboden in de weblettertypecatalogus, inclusief Google Web Fonts en zelf gehoste lettertypen.

We zullen ook kijken naar hoe Adobe Muse omgaat met welk type kan niet worden weergegeven met weblettertypen, dus laten we aan de slag gaan!

Bekijk Screencast

Download de video of abonneer je op Tuts + Web Design op YouTube.

Lees de handleiding

Hallo daar, en welkom terug op Tuts + voor een nieuwe tutorial over Adobe Muse. Ik ben Michael Chaize en ik laat je zien hoe je weblettertypen kunt gebruiken in je projecten. Met Adobe Muse kunt u dus een tekstblok selecteren en met het gereedschap Tekst kunt u natuurlijk het lettertype definiëren dat u in uw ontwerp wilt gebruiken.

U kunt de Web Safe-lettertypen gebruiken. Dit is een lijst met lettertypen die standaard in alle browsers is geïnstalleerd, maar dit zijn lettertypen die Microsoft in 1996 heeft gedefinieerd. U wilt misschien een beetje plezier en creativiteit toevoegen aan uw ontwerp met behulp van internet fonts. Dus als u zegt dat u weblettertypen wilt toevoegen, hebt u toegang tot Adobe Edge Web Fonts Catalog.

Adobe Edge Web Fonts Catalog

Dit is dus een catalogus met gratis weblettertypen, eigenlijk bevat het alle weblettertypen van Google en wordt het gehost door Adobe. U kunt dus bijvoorbeeld zeggen dat u wilt gebruiken Aladdin, dus je vinkt het gewoon aan, je drukt op OK en het voegt Aladdin toe aan je lijst met lettertypen.

Nu kunt u teruggaan en zeggen dat u Aladdin wilt gebruiken. Dus, wanneer u uw pagina publiceert en vervolgens in de browser aanvinkt, kunt u zien dat ik de tekst kan selecteren. Dit is echte tekst op internet.

Uw systeemlettertypen

Waarom vertel ik je dit? Omdat als u een lettertypefamilie wilt gebruiken die alleen op uw computer is geïnstalleerd, dit is wat er zal gebeuren. Dus ik selecteer mijn tekst en ik blader door mijn lettertypen op mijn computer. En laten we zeggen dat ik wil gebruiken Mistral. U ziet een nieuw pictogram op uw scherm verschijnen.

Het betekent dat dit lettertype op de computer is geïnstalleerd, en dat is prima. Maar dit betekent niet dat u het op internet kunt gebruiken, het is geen weblettertype en misschien heeft u geen licentie om het op internet te gebruiken. Daarom zal Adobe Muse, wanneer u uw pagina publiceert, deze omzetten in HTML. Het zal de tekst aannemen en omzetten in een afbeelding. Dus nu kan ik de tekst niet selecteren, oké. Het is een afbeelding. En zie je, het is niet helder en, voor zoekmachineoptimalisatie, is dit niet goed. Omdat de Google-robot de inhoud van deze tekst niet kan analyseren.

Dus om verschillende redenen is dit niet iets dat u wilt doen. Misschien kan het soms nuttig zijn voor een titel. Oké, je wilt het uiterlijk van het lettertype behouden. Dat is prima. Maar er zijn zoveel weblettertypen beschikbaar op internet. Ik zal u laten zien hoe u elk type weblettertype kunt gebruiken met een juiste licentie voor internet.

Weblettertypen

Als u dus teruggaat naar het weblettertypenmenu, hebt u toegang tot de catalogus met Edge Web-lettertypen. Er zijn meer dan 500 lettertypen. Ik bedoel, dat is veel.

Of u kunt zelf gehoste weblettertypen gebruiken. Adobe Muse heeft WOFF-, EOT- of SVG-bestanden nodig, die open standaarden zijn om lettertypen op het web voor een webbrowser te beschrijven. Dus laat me je laten zien wat je kunt doen. Ik kies gewoon een website met gratis lettertypen voor commercieel gebruik, dat is Font Squirrel.

Wat ik leuk vind aan Font Squirrel, is dat je eenvoudig de inhoud van de catalogus kunt filteren en zeggen dat ik een lettertype wil dat ik op mijn bureaublad, maar ook op mijn website kan installeren en gebruiken..

Dus, ik zal de weblettertypefilter hier controleren. En dan kun je natuurlijk een categorie, een classificatie kiezen. Dus ik heb het Slab Serif-lettertype nodig en het ziet er eigenlijk best uit, dus ik zal het bestand downloaden.

Dus ik heb vet, vet cursief, cursief en regelmatig, dus ik zal regelmatig op mijn bureaublad installeren. Ik dubbelklik gewoon en installeer het lettertype. Nu kan ik het op mijn Adobe Muse-site gebruiken, maar zoals u kunt raden, zal het zich gedragen als Mistral, dus als een systeemlettertype.

Dus, ik ga terug en selecteer Bitter. Oké, ik heb het in Muse maar het zal worden omgezet in een afbeelding, en dit is niet wat ik wil. Ik wil Bitter gebruiken als een weblettertype. Dus nogmaals, het probleem is hier, wanneer je hier teruggaat, Weblettertypen toevoegen.

Het wacht op WOFF-bestanden of EOT-bestanden. Dus, op Font Squirrel, is er een gratis service genaamd de Web Font Generator, die je kunt gebruiken.

Dus ik zal de lettertypen toevoegen. Het zal het lettertype uploaden en dan klik ik op Download je kit. En het zal een nieuw zipbestand voor mij maken, dat deze keer weblettertypen zal bevatten.

Oke. Dit is dus de nieuwe map en nu heb ik een EOT-bestand, SVG, WOFF. Dus ik kan het gebruiken in Adobe Muse. Dus als we teruggaan naar Adobe Muse, kan ik nu op Mijn computer zoeken en deze nieuwe map selecteren die de WOFF-, EOT- en SVG-bestanden bevat.

Maar nogmaals, ik vink het vakje aan, alleen om te bevestigen dat ik een juiste licentie heb, kan ik het op internet gebruiken. En Adobe Muse zal automatisch overeenkomen met het Bitter-lettertype dat op mijn systeem is geïnstalleerd. Oke. Het is dus erg belangrijk voor Muse omdat ik in de Desktop-app het systeemlettertype zal gebruiken en eenmaal op internet zal het deze set lettertypen gebruiken.

Ik publiceer de pagina. We merken dat dit de tekst ok is. Zo kunnen weblettertypen rechtstreeks in Adobe Muse worden toegevoegd. En we weten allemaal, dat typografie essentieel is in Web Design. En er zijn zoveel weblettertypen beschikbaar. Ik vind het een geweldige toevoeging.

Meer Adobe Muse

Voor een meer gedetailleerde kijk op Adobe Muse neem een ​​kijkje op mijn gratis cursus Ontwerp en publicatie van websites met Adobe Muse.