Webfonts activeren en toepassen (Web Fonts)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Gebruik maken van Glyphs

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

De fonts die je veilig kunt gebruiken in webdesign zijn de ‘Standard Fonts (with Fallbacks).

Ze staan geordend in een aparte sectie in de lijst van lettertypes.

Bovenaan staan de recent toegepaste fonts.

De lengte van deze lijst bepaal je bij de programma-voorkeuren van Adobe Muse.

Dan volgt de afdeling Web Fonts.

Daar vertel ik zometeen meer over.

En dan volgen dus die Standard Fonts.

Dit zijn fonts die op elke computer aanwezig zijn.

Per font zie je tussen haakjes nog een aantal andere lettertypes staan.

Dat zijn de Fallback fonts.

Dit houdt het volgende in.

Stel ik kies voor het lettertype ‘Trebuchet’.

Mocht onverhoopt deze letter toch niet aanwezig zijn op de computer van de gebruiker.

dan zal de ‘Trebuchet MS’ gebruikt worden.

Als die er ook niet is, de ‘Tahoma’ dan de ‘Arial’.

En als ook die fonts niet aanwezig zijn dan een ‘Sans-Serif’.

Oftewel een schreefloze letter.

De laatste sectie zijn de ‘System Fonts’.

Ik zou je afraden om hiervan gebruik te maken als je gaat publiceren op het web.

Je mag gekochte fonts namelijk niet dupliceren of verspreiden.

Alleen fonts die je wel mag verspreiden.

En die je op je eigen computer hebt geïnstalleerd zou je hier uit de lijst kunenen kiezen.

Maar daar ga ik nu niet verder op in.

Dus de enige optie tot nu toe zijn dan de 'Standard Fonts with Fallbacks'.

Maar je ziet dat deze lijst zeer beperkt is.

En de fonts zien er ook niet erg bijzonder uit.

Muse biedt met de sectie 'Web Fonts' uitkomst.Klik op ‘Add Web Fonts’.

Een overzichtsvenster toont verschillende opties om van webfonts gebruik te gaan maken.

'Get Started' en dan allereerst de 'Typekit Web Fonts'.

Zolang je een Creative Cloud Account hebt.

Mag je gebruik maken van de 'Typekit Web-fonts'.

Maar zodra je je account opzegt.

Dan zullen al je publicaties waarin een Typekit webfont wordt gebruikt.

Geen toegang meer krijgen tot de server waar deze fonts op staan.

Er wordt dan een ’standaard’ beschikbare letter gebruikt voor de vormgeving.

Dat is dan weer zo’n standaard webfont die op iedere computer staat.

De echte gratis fonts vind je onder de 'Edge Web Fonts'.

Deze mag iedereen gratis en voor niets gebruiken.

Dus dat zou een veilige oplossing zijn.

De laatste optie de ‘Self Hosted’ zou ik afraden.

Je moet dan namelijk een font gekocht hebben.

Maar ook nog de rechten hebben om deze te verspreiden. Dat is echt nog een verhaal apart.

Dus wij gaan voor de Edge Web Fonts.

Hier zie je de volledige lijst aan mogelijke fonts op alfabetische volgorde.

Je kunt filteren op een classificatie.

Filter op schreefloze letters, klassieke schreef, of een egyptienne, een moderne schreefletter.

Dan kun je ook nog aangeven of dit font geschikt moet zijn als leestekst.

Of dat je deze gaat gebruiken voor koppen.

De lijst is al een stuk kleiner geworden.

Mij lijkt het lettertype de ‘Enriqueta’ wel iets.

Selecteer deze letter. Een blauw vinkje verschijnt En klik dan op OK.

Een venster verschijnt waarin staat dat er letters toegevoegd worden aan het lettertype-menu.

Klik op OK. Open het fontmenu. Ga naar Webfonts.

En ik heb per ongeluk ook nog de 'Chunck' aangewezen. Nou...

Die ga ik zometeen weghalen. laat ik meteen zien hoe dat ook werkt.

De Enriqueta, deze heeft achter de naam een driehoekje staan.

Dat betekent dat het font ook nog familieleden bevat.

In dit geval een Regular- en een Bold versie.

Je bent altijd blij met een font met verschillende gewichten.

Want dan kun je variëren in de tekstopmaak zonder dat dat chaotisch en rommelig wordt.

Dat gevaar zou je wel hebben als je telkens andere lettertypes zou gaan gebruiken.

Het zal je niet verbazen dat Adobe Type Kit.

Meer fonts aanbiedt met verschillende gewichten dan deze gratis Edge Web Fonts.

Ik vervang het lettertype van deze kop voor de nieuwe letter.

Ik kies daarvoor de bold-versie uit.

Daarna vervang ik de oude stijlopdracht voor deze nieuwe.

Met de optie ‘Redefine Style’.

En alle koppen worden in het nieuwe lettertype gezet.

Meestal gebruik je één goed leesbaar font voor de leesteksten.

En een wat meer karakteristieke letter voor de koppen en de subkoppen.

Als je gebruik maakt van een extern font zoals deze Enriqueta.

Dan moet je wel rekening houden met een iets langere opbouwtijd voor de webpagina.

Immers eerst moet er connectie gemaakt worden met de server waar het font op gehost wordt.

Het font moet ingelezen worden door de computer van de gebruiker.

En pas dan kan de pagina op de juiste manier opgebouwd worden.

Dit is de reden waarom designers voor de leesteksten vaak gebruik maken van de standaard fonts.

En alleen voor de koppen een webfont gebruiken.

Om een font, wat ik per ongeluk heb toegevoegd, te verwijderen uit de fontlijst moet je deze deactiveren.

keer dan terug naar de web-bibliotheek door te klikken op de knop 'Add Web Fonts'.

Activeer de juiste bibliotheek. Zoek het font op in de lijst.

Je herkent hem aan een blauw vinkje.

Hier staat hij. Deactiveer het lettertype door nogmaals op de letter te klikken.

Zorg dat het vinkje grijs wordt. Klik dan op OK.

Een venster geeft aan dt éen letter verwijderd is uit het menu.

Keer terug naar mijn fontlijst, de Web Fonts.

Inderdaad is het lettertype de Chunck nu niet meer aanwezig.

Stel dat ik op deze manier de Enriqueta zou hebben verwijderd. Ga ik ook nog even doen.

Keer ik weer terug naar mijn Adobe Web Fonts. Ik filter op de Egyptienne. En ik vink deze letter uit.

De letter wordt verwijderd uit de lijst. Toch zie ik hier nog dit lettertype toegepast.

Hij zit nog wel in het geheugen.

Alleen ik herken dat dit lettertype niet meer aanwezig is.

Omdat de fontnaam ook tussen blokhaken wordt weergegeven.

Zo geeft muse aan dat deze koppen, ooit in de Enriqueta waren opgemaakt maar dat het font op dit moment niet beschikbaar is.