Skip to main content

Google Fonts - @font-your-face module

Step1. Download and enable the @font-your-face module via composer

anisur$ composer require drupal/fontyourface
Using version ^3.2 for drupal/fontyourface
./composer.json has been updated
> DrupalProject\composer\ScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing drupal/fontyourface (3.2.0): Downloading (100%)         
Writing lock file
Generating autoload files
> DrupalProject\composer\ScriptHandler::createRequiredFiles
Mds-MacBook-Air:twig anisur$ drush en fontyourface
 [success] Successfully enabled: fontyourface
 [notice] Message: If you have not yet enabled any @font-your-face provider modules, please do 
so. If you have already enabled @font-your-face provider modules, please use 
the font settings page in the appearance section to import fonts from them.

anisur$ drush en google_fonts_api
 [success] Successfully enabled: google_fonts_api
 [notice] Message: Due to the number of fonts, automated import from install for Google Fonts is 
disabled. Please use @font-your-face settings [1] to import Google Fonts.

[1] http://default/admin/appearance/font/settings

anisur$ drush cr
 [success] Cache rebuild complete.
Step 2. Go to http://***.com/admin/appearance/font/settings (Appearance > @font-your-face > Settings)
Check Load all enabled fonts
Click 'Import all fonts' button => Importing...
Click 'Save configuration' after importing fonts
Step 3. Create a Font Display
Click Appearance > @font-your-face > Browse
Search 'Montserrat' - Montserrat is the closest Google font
Click 'Font display" tab and then click 'Add Font display' button
Add a Title, Choose Font, Preset Selectors, and Theme from Dropdown and click Save button
Back to top