Handboek Annuleren

Lettertypen toevoegen aan je website

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. How to use fonts in Adobe Muse
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to font menu
    13. "Unable to add one or more fonts" or "A font with the same name is already installed"
    14. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

Je kunt weblettertypen van Adobe Fonts gebruiken op je websites, in HTML-e-mailcampagnes, in artikelen in de AMP-indeling van Google en vele andere soorten projecten waarin weblettertypen worden ondersteund.

 

Lettertypen kiezen om te gebruiken

Begin door te zoeken in de bibliotheek met lettertypen. Je kunt de benodigde taalondersteuning kiezen in de vervolgkeuzelijst TALEN EN SCHRIJFSYSTEMEN.

Zoekpagina op Adobe Fonts

Voeg labels of filters toe om de lijst met lettertypen te verfijnen. Gebruik onze labels in natuurlijke taal om lettertypen te zoeken die passen bij de sfeer van je project. Je kunt ook filteren op classificatie (zoals met schreef of schreefloos), eigenschappen (x-hoogte, breedte of dikte) of taal. 

Zoeken met Adobe Fonts-labels

Een webproject maken

Wanneer je een lettertype vindt dat je bevalt, klik je op de knop </> om de familie aan een webproject toe te voegen.

Een webproject maken van een lettertypekaart

Je kunt ook op de naam van het lettertype klikken om de familiepagina te openen en alle beschikbare tekendikten en lettertypestijlen te bekijken. Klik daarna op </> Toevoegen aan webproject bovenaan de pagina om de familie toe te voegen aan een webproject.

Een nieuw weblettertype toevoegen vanaf de pagina van een lettertypefamilie.

In het venster Lettertypen toevoegen aan een webproject geef je je webproject een naam en bepaal je welke lettertypen moeten worden opgenomen.

  1. Klik op het menu en kies 'Een nieuw project maken'.
  2. Geef je webproject een naam.
  3. Gebruik de selectievakjes om de tekendikten en lettertypestijlen te selecteren die je wilt opnemen.
  4. Maak het project.

Je kunt achteraf wijzigingen aanbrengen in de projectinstellingen via de pagina Mijn Adobe Fonts.

image

Vervolgens krijg je de insluitcode te zien waarmee je de lettertypen in je website kunt laden. De verschillende opties worden uitgelegd op de Help-pagina voor de insluitcode en de standaard insluitcode werkt voor de meeste projecten.

Kopieer de insluitcode en voeg deze toe aan de tag <head> van je website.

image

Klik op Gereed om het venster met het webproject te sluiten en verder te zoeken. Als je meer lettertypen wilt toevoegen aan je project, klik je op de knop </> van een andere lettertypefamilie en kies je de projectnaam in het menu (in plaats van 'Een nieuw project maken').

Je webproject aanpassen

Je webproject en alle lettertypen die je eraan hebt toegevoegd, worden weergegeven onder Mijn Adobe Fonts.

Klik op de knop Project bewerken om te wijzigen welke tekendikten en lettertypestijlen zijn opgenomen, om een weblettertypefamilie helemaal uit het project te verwijderen of om een instelling voor lettertypeweergave (font-display) te selecteren. Je kunt ook de tekenset wijzigen in de webprojecteditor, die de taalondersteuning van het project aangeeft.  

wp-page

Oost-Aziatische lettertypen moeten worden aangeleverd met een dynamische subset, terwijl andere lettertypen subsetopties hebben die afhankelijk zijn van de taal: Standaard, Alle tekens of een aangepaste taalsubset. Op de Help-pagina Taalondersteuning en subsets vind je meer informatie over de verschillende opties.

Je kunt de beschikbare OpenType-functies in het project opnemen door het vakje 'OpenType-functies' in te schakelen. Als je dit vakje inschakelt, wordt er een lijst weergegeven met de functies die beschikbaar zijn voor die specifieke weblettertypefamilie, zoals ligaturen, alternatieve tekens of kleinkapitalen.

Onder Lettertypeweergave kun je opgeven hoe weblettertypen in de webbrowser worden geladen en op je website worden toegepast. Meer informatie over deze mogelijkheden vind je op onze Help-pagina Instellingen voor lettertypeweergave.

Wanneer je het project naar wens hebt geconfigureerd, klik je op 'Wijzigingen opslaan' om het project op te slaan. De wijzigingen zijn binnen enkele minuten beschikbaar voor gebruik op je website.

De lettertypen in je CSS toepassen

Op de pagina van een webproject worden de naam van de CSS-lettertypefamilie, de numerieke dikte en de lettertypestijl voor elk lettertype in het project weergegeven. Gebruik deze namen van lettertypefamilies in je CSS om die lettertypen op de tekst toe te passen.

wp-page

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online