Aangepaste lettertypen gebruiken van de website Google Web Fonts in Dreamweaver - dummies

Een van de gemakkelijkste manieren om Dreamweaver te gebruiken om aangepaste lettertypen aan uw site toe te voegen, wordt aangeboden door Google. Google Web Fonts biedt een beperkte verzameling lettertypen, maar u kunt al hun lettertypen gratis gebruiken. Volg deze stappen om een ​​van de lettertypen van de Google Web Fonts-site aan uw pagina's toe te voegen:

1. Open een webbrowser en ga naar Google-website voor weblettertypen .

2. Doorzoek de lettertypen die beschikbaar zijn op de site door het type en de stijl van het lettertype te selecteren waarnaar u op zoek bent.

   Gebruik Filters (in de linkerkolom) om uw zoekopdracht te verfijnen. U kunt de tekst die in elk lettertype wordt weergegeven, wijzigen door het veld Voorbeeldtekst boven aan het scherm te bewerken.

   

3. Zoek een lettertype dat u bevalt en klik vervolgens op de blauwe knop Toevoegen aan verzameling rechtsonder, net onder elke lettertypenaam.

4. Schakel de selectievakjes in naast de lettertypestijlen die u op uw webpagina wilt gebruiken.

   De meeste lettertypen in de Google Font Directory hebben slechts één stijl. Hoewel je misschien in de verleiding komt om alle stijlen te kiezen, is het het beste om alleen die te selecteren die je zult gebruiken. Google waarschuwt dat hoe meer letterstijlen u kiest, hoe langer het duurt om uw webpagina te downloaden.

5. Scroll naar beneden en selecteer de Latijnse optie (voor Engels).

   Als u de extra tekens voor een andere taal nodig heeft, selecteert u in plaats daarvan de Latijnse Extended-optie.

6. Blader verder naar beneden naar de blauwe doos met drie tabbladen; klik op het eerste tabblad om het lettertype aan uw website te koppelen.

   Google biedt drie opties: standaard, @import en JavaScript. U vindt gedetailleerde beschrijvingen van alle drie op de Google-site.

   

7. 7. Kopieer de koppeling vanuit het tabblad 'Standaard' op Google, net zoals u elke andere tekst of code van een webpagina zou kopiëren.

8. Plak in Dreamweaver de link in het kopgedeelte van uw webpagina tussen de tags openen en sluiten.

9. Keer terug naar de Google-website weblettertypen en kopieer onder aan de pagina de naam van de lettertypefamilie.

   U kunt de naam van de lettertypefamilie vinden in het gedeelte De lettertypen integreren in uw CSS-gebied.

   In uw stijldefinitie moet u de naam van het lettertype precies opnemen zoals Google het schrijft. Kopiëren en plakken is de beste manier om ervoor te zorgen dat de naam van het lettertype overeenkomt.

10. Plak in Dreamweaver de naam van de lettertypefamilie in de CSS-regel waar u het lettertype wilt gebruiken.

11. Pas de regel toe op tekst op uw webpagina.

    Als u het lettertype in een Tagselector-stijl, zoals de tag

    , gebruikt wanneer u de tag toepast op tekst, wordt het lettertype automatisch toegepast als onderdeel van de regel. Als u het lettertype in een klasse- of ID-stijl gebruikt, moet de stijl worden toegepast op een label dat de tekst omringt, zoals een

    -tag of een tag.

12. Publiceer de pagina naar een webserver en bekijk een voorbeeld van de pagina in een webbrowser om het lettertype te bekijken.

    Houd er rekening mee dat wanneer u weblettertypen van Google gebruikt, het lettertype mogelijk niet wordt weergegeven in Dreamweaver, ook niet als u de optie Liveweergave gebruikt. Om ervoor te zorgen dat het lettertype op uw pagina werkt, moet u de pagina mogelijk met behulp van FTP overbrengen naar een webserver en een voorbeeld van de pagina bekijken nadat deze online is gepubliceerd.