Google webfonts toepassen in css

uit de cursus Webdesign & Layout met css (2019)

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

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

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

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Fonts biedt niet veel leuke fonts. Maar gelukkig is daar Google-fonts.

Ga naar de website www.fonts.google.com.

Op deze pagina staan allemaal fonts die je gratis mag gebruiken. En het is een hele lange lijst van allerlei verschillende lettertypes.

Om het jezelf wat makkelijker te maken kun je gaan filteren op het soort lettertype wat je zoekt.

Klik op het zoek-icoon en een lijst met filteropdrachten verschijnt.

Ik zoek een schreefloze leesletter. Ik deselecteer alles behalve de Sans Serif.

Als je graag met meerdere stijlen en gewichten wilt kunnen werken dan activeer je de optie Number of Styles.

Ik zet het aantal op minstens zes varianten. De resultatenlijst wordt direct aangepast.

Klik op de naam van een letter die je mooi vindt en je ziet meer informatie.

Hier zie je naast een overzicht van alle ontworpen karakters,

ook de lijst van gewichten en stijlen die je met dit font kunt gaan toepassen.

Kies je voor dit font klik dan bovenin op de knop Select this font.

Onderin het venster wordt nu deze letter voor je bewaard. Zo kun je meerdere fonts gaan verzamelen.

Ik zoek direct ook even een signaalletter voor mijn koppen en activeer alle Display-fonts.

Ditmaal hoef ik niet meerdere varianten ervan dus deactiveer ik de knop Number of Styles.

Ik kies voor de Lobster. Klik op het plus icoon om ook dit icoon toe te voegen aan de verzamellijst.

Deze fonts wil ik in mijn website gaan implementeren. Dat doe je als volgt. Klik op het verzamelblad.

Bovenin staat de link die je moet plaatsen in de head van de html-pagina. Activeer het tabblad CUSTOMIZE.

Je ziet een lijst aan stijlen. Activeer alle varianten die je wilt gaan gebruiken. Ik vink ze allemaal aan.

Google geeft met waarschuwing dat door het opnemen van zoveel varianten de website langzamer geladen zal worden.

Ik trek me er nu niet zoveel van aan. Want ik wil juist met deze varianten aan de slag in de komende lessen.

Maar normaliter vink je natuurlijk alleen maar aan wat je ook daadwerkelijk gaat gebruiken. Ga terug naar het tabblad EMBED.

De link is nu aangepast. Alle varianten zijn hierin nu opgenomen.

Selecteer de html-link en kopieer deze met Commando C. Activeer Brackets.

Plaats de cursor in de head van het html document nog boven de link naar jouw stijlblad,

en plak dan de gekopieerde code met Commando V. Bewaar het document.

Activeer het stijlblad, en ik vervang de koppen die nu in de Georgia staan in de lobster.

En zie al mijn koppen staan nu in dit lettertype. Alle leesteksten met het p-element krijgt het font Heebo.

Het font wordt door Google gehost. Daarvoor heb je een link in de head van het html-document geplaatst. Verwijder je deze link,

Dan zal het lettertype niet gevonden worden. Dan wordt automatisch de tweede keuze getoond.

In mijn geval de Times New Roman. Ik plak de link weer terug. Dit is een prachtige manier van werken.

De gebruiker hoeft dit lettertype niet op zijn eigen machine te installeeren. Zolang google online is,

kun je van al die prachtige lettertypes gebruik maken. Zie hoe fantastisch de display-fonts zijn.

Als je hier geen font kunt vinden die jouw site direct een originele draai geeft dan weet ik het ook niet meer.