3

I'm trying to use a Google font, which requires adding either a <link> or <style> section inside the <head> per the below instructions. I am using a subtheme and can modify the section directly in html.html.twig, if that's the right way to do it.

However, I noticed <head-placeholder>, <css-placeholder>, and <jss-placeholder> inside <head> and I am wondering if those are intended to be used to insert code from somewhere else.

What's the best practice for adding to <head>?

r

9
  • 1
    You can't use the @font-face CSS rule? You can put this inside the .css file.
    – No Sssweat
    May 29, 2020 at 20:14
  • @NoSssweat hmm, not sure! Do you know why Google wouldn't specify this option in the instructions? See the image (above) that I had forgotten to paste originally. May 29, 2020 at 22:16
  • Download the font and provide it from your server. css-tricks.com/snippets/css/using-font-face
    – leymannx
    May 29, 2020 at 23:11
  • 3
    Loading fonts from Google acts as a CDN, and allows for more parallel downloads, so personally, I prefer to get it from Google rather than saving locally.
    – Jaypan
    May 29, 2020 at 23:49
  • 3
    I don't know why someone downvoted this question. It's an entirely valid, entirely Drupal question. But someone didn't understand it, and voted it down, without saying why. Basically bullying.
    – Jaypan
    May 29, 2020 at 23:50

2 Answers 2

7

First, define a library in your theme that links to the font.

[THEME].libraries.yml:

fonts:
  css:
    theme:
      # Do not include http: or https.
      # Should start with a double slash.
      //fonts.googleapis.com/css?family=Source+Sans+Pro: { type: external }

This library is loaded by adding it to the theme's [THEME].info.yml file:

libraries:
  - [THEME]/fonts
2
  • Does Drupal then inject this at <css-placeholder>? If not, any idea what those fields are for? May 29, 2020 at 22:21
  • Yes it does. &nbsp;
    – Jaypan
    May 29, 2020 at 23:48
3
  1. All CSS library that has been declared in [THEME].libraries.yml and loaded by the [THEME].info.yml will be injected into the <css-placeholder>.

  2. All JS library that has been declared in [THEME].libraries.yml and has been loaded by the [THEME].info.yml will be injected into the <jss-placeholder>.

  3. All JS library that has been declared in [THEME].libraries.yml with header : true and loaded by the [THEME].info.yml will be injected into the <head-placeholder>.

    js-header:
      header: true
      js:
        header.js: {}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.