Contrib.social

Document how to add fonts from the GoogleFonts collection

Open on Drupal.org →
Created on 14 April 2023, about 2 years ago
Updated 23 April 2023, about 2 years ago

Documentation location/URL

https://www.drupal.org/docs/8/themes/barrio-bootstrap-4-drupal-89-theme/... →

Problem/Motivation

One of the features of the Barrio theme is the ability to quickly switch fonts using the UI (Appearance/YOURSUBTHEME/settings/Fonts&Icons/fonts). The current documentation does a good job of explaining how to add a single font from Google Fonts to Barrio; however, the current version of the theme uses font pairings in the user interface.

I was able to make some changes to the code and documentation provided by gaspounet to add additional font pairings to the UI using any fonts from the GoogleFonts collection.

Proposed resolution

  1. First, go to https://fonts.google.com/ and select two fonts. Follow the directions and make sure both font families are visible under the “Review” panel in the right sidebar. In the following example, I am using “Libre Caslon Text” and “Quando.”
  2. Using your code editor, open the file themes/custom/YOURTHEME.libraries.yml. Then look at the code supplied by the Google Fonts page and shorten it so that it is in the following format (your code might be slightly different if you include additional styles from within your font family):
  3. libre_caslon_text_quando:
  version: VERSION
  css:
    component:
      fonts/libre_caslon_text_quando.css: {}
      //fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400|family=Quando: { type: external }
  4. In YOURTHEME.theme, add or modify the following lines:
  5. function bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state): void {
  $form['components']['navbar']['bootstrap_barrio_navbar_top_background']['#options'] = array(
    'bg-primary' => t('Primary'),
    'bg-secondary' => t('Secondary'),
    'bg-light' => t('Light'),
    'bg-dark' => t('Dark'),
    'bg-white' => t('White'),
    'bg-transparent' => t('Transparent'),
  );
  $form['components']['navbar']['bootstrap_barrio_navbar_background']['#options'] = array(
    'bg-primary' => t('Primary'),
    'bg-secondary' => t('Secondary'),
    'bg-light' => t('Light'),
    'bg-dark' => t('Dark'),
    'bg-white' => t('White'),
    'bg-transparent' => t('Transparent'),
  );

  $form['fonts']['fonts']['bootstrap_barrio_google_fonts']['#options'] ['libre_caslon_text_quando'] = 'Libre Caslon Text, Quando';
}

function bootstrap_barrio_subtheme_preprocess_page(&$variables)
{
  $fonts = theme_get_setting('bootstrap_barrio_google_fonts');
  if ($fonts)
    $variables['#attached']['library'][] = (in_array($fonts, ['libre_caslon_text_quando']) ? 'bootstrap_barrio_subtheme' : 'bootstrap_barrio' ) . '/' . $fonts;
}
  6. Finally, create a folder "fonts" in YOURTHEME folder and create a file for every font PAIR. Again, I have selected Libre Caslon Text and Quando, so I have named the file libre_caslon_text_quando.css. Don’t create a separate file for each font family, and only put two fonts in each file. In this example, I am using Quando for selected headings, and Libre Caslon Text for most body copy, but your file may be different depending on how you choose to use each font.
  7. /* ---------- Libre_caslon_text_quando ---------- */

h1,
h1 a {
  font-family: 'Quando', serif;
  font-weight: 900;
}
h2,
h3,
h4,
h5,
h6,
h2 a,
h3 a {
  font-family: 'Quando', serif;
}
body,
p,
a,
li {
  font-family: 'Libre Caslon Text', serif;
}
  8. Be sure to refresh your cache. Your new font pairing will appear in the UI along with the other font pairs.
📌 Task
Status

Active

Version

5.5

Component

Documentation

Created by

🇺🇸United States lenlamberg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024