- Adobe Fonts User Guide
- Introduction
- Font licensing
- Font licensing
- Manage your account
- Licensing for Creative Cloud for enterprise customers
- Adding font licenses to your account
- Removing fonts from the subscription library
- Adobe Fonts not available to Adobe IDs registered in China
- Why aren't these fonts included in my Creative Cloud subscription?
- Morisawa font removal September 2021
- Getting and using fonts
- Using Adobe Fonts in Creative Cloud apps
- Manage your fonts
- Resolve missing fonts in desktop applications
- Using fonts in InDesign
- Fonts and typography
- Using web fonts in HTML5 Canvas documents
- Using fonts in InCopy
- Using web fonts in Muse
- Packaging font files
- Troubleshooting guide: Adding fonts
- Added fonts aren't showing to font menu
- "Unable to add one or more fonts" or "A font with the same name is already installed"
- What happens when a font I'm using is updated by the foundry?
- Web design and development
- Add fonts to your website
- Troubleshooting guide: Adding fonts to a website
- Troubleshoot font issues
- Using web fonts in HTML email or newsletters
- Using web fonts with Accelerated Mobile Pages (AMP)
- CSS selectors
- Customize web font performance with font-display settings
- Embed codes
- Dynamic subsetting & web font serving
- Font events
- Why are my web fonts from use.typekit.net?
- Site can't connect to use.typekit.net
- Using web fonts with CodePen
- Browser and OS support
- Domains
- Using web fonts when developing locally
- Content security policy
- Printing web fonts
- Language support and OpenType features
- Font technology
CSS-kiezers vertellen de browser waar de weblettertypen die je gebruikt, moeten worden toegepast en welke dikte en stijl van het lettertype voor de tekst moet worden gebruikt.
De namen van lettertypefamilies gebruiken in je CSS
Op de pagina Webprojecten worden de naam van de CSS-lettertypefamilie (font-family), de numerieke dikte en de lettertypestijl voor elk lettertype in het project weergegeven. Klik op de koppeling 'Project bewerken' om de CSS-gegevens voor elk project te bekijken.
Nadat je de insluitcode in je document hebt opgenomen, gebruikt deze namen van lettertypefamilies in de CSS om de lettertypen op de tekst toe te passen. Bijvoorbeeld:
h1 {
font-family: "brandon-grotesque", sans-serif;
}
Alternatieve lettertypen opgeven
Als de browser van een gebruiker geen weblettertypen ondersteunt of als ze om de een of andere reden niet worden geladen, worden in plaats daarvan de alternatieve lettertypen in de CSS-stack gebruikt.
De lettertypestack moet ten minste één alternatief lettertype bevatten dat beschikbaar is op alle platforms (zoals Georgia of Arial), gevolgd door een algemene naam van de lettertypefamilie (zoals serif of sans-serif). Als de browser het eerste lettertype niet kan vinden, wordt het tweede lettertype geprobeerd enzovoort.
Meerdere dikten en stijlen gebruiken
Je kunt andere tekendikten (font-weight) dan 'normaal' en 'vet' opgeven door numerieke waarden voor tekendikte in de CSS te gebruiken. De numerieke waarden komen gewoonlijke overeen met deze dikten:
- 100 = dun
- 200 = extra licht
- 300 = licht
- 400 = normaal, romein
- 500 = medium
- 600 = half-vet
- 700 = vet
- 800 = dik
- 900 = extra dik
Je vindt de numerieke waarden voor alle lettertypen in je project op de pagina Webprojecten.
Gebruik bijvoorbeeld deze CSS als je de dikte 700 van een lettertype wilt toepassen op het element h1:
h1 {
font-weight: 700;
}
Variantspecifieke namen gebruiken in Internet Explorer 8
Internet Explorer 8 laadt maximaal vier dikten per familie en als je twee dikten gebruikt die bij elkaar in de buurt liggen (zoals 600 en 700), kan dat ertoe leiden dat slechts één dikte goed wordt geladen. Adobe Fonts biedt variantspecifieke namen van lettertypefamilies aan voor die versies van de browser om deze fout te voorkomen.
De variantspecifieke naam moet waar nodig aan het begin van een font-family stack worden toegevoegd, vóór de naam van de hoofdfamilie:
#post-title {
font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
font-style: normal;
font-weight: 700;
}
De namen bestaan uit de normale naam van de lettertypefamilie, gevolgd door een streepje, gevolgd door een beschrijving van de lettertypevariant. De variantspecifieke naam van brandon-grotesque die het lettertype met dikte 700 bevat, is bijvoorbeeld brandon-grotesque-n7.
De variantspecifieke naam is niet gedefinieerd in browsers die deze problemen niet ondervinden, dus deze gebruiken de volledige familienaam die als tweede in de stack staat.
De meeste gebruikers zullen deze aanvullende namen van lettertypefamilies niet hoeven te gebruiken. Je hoeft ze enkel toe te voegen als je problemen ziet met een correcte weergave van lettertypen in Internet Explorer 8.
