Advanced Components
  • Welcome
  • Start here
    • Setup
    • Dependencies
  • Getting Started
    • Front-end tooling
    • Create a new D9 theme
    • Component Architecture
    • Drupal Best Practices
    • Drupal Attributes
    • Twig Blocks
  • Basic Components
    • Global styles
    • Adding webfonts
    • Heading Component
      • Improving the Heading
    • Button Component
  • A component's lifecycle
    • Hero Component
    • Include statements
    • Drupal prep
    • Drupal entities
    • Homepage content type
    • View modes
    • Add Hero to homepage
    • Drupal cache & twig debugging
    • Twig template suggestions
    • Getting field values
    • Integrating the Hero
    • Drupal Libraries
    • Hero Image styles
  • Card component
    • Card Component
    • Component Variants
    • Card Variant
    • Author component
  • Drupal site building
    • Blog articles
    • View modes
    • Drupal Views
    • Author
    • Generate content
    • Adding Blog Lists to the Homepage
  • Drupal Integrations
    • Integrating the Card
      • Taxonomy terms
    • Integrating the Card Wide
    • Author integration
    • From our blog
    • Integrating From our blog
    • Featured Content
    • Integrating Featured Content
    • Blog image styles
    • Blog detail page
  • Extras
    • Image Styles
    • Navigation
  • Resources
    • Resources
Powered by GitBook
On this page

Was this helpful?

  1. Basic Components

Adding webfonts

Pattern Lab:

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,400;0,600;0,800;1,300;1,400&display=swap">
 <link rel="stylesheet" href="../../css/all.css?{{ cacheBuster }}" media="all" />

Drupal Library:

webfonts:
  css:
    base:
      'https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,400;0,600;0,800;1,300;1,400&display=swap': { type: external, minified: true }
PreviousGlobal stylesNextHeading Component

Last updated 3 years ago

Was this helpful?