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

  • 1
    You can't use the @font-face CSS rule? You can put this inside the .css file. – No Sssweat May 29 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. – glenviewjeff May 29 at 22:16
  • Download the font and provide it from your server. css-tricks.com/snippets/css/using-font-face – leymannx May 29 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 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 at 23:50
6

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
| improve this answer | |
  • Does Drupal then inject this at <css-placeholder>? If not, any idea what those fields are for? – glenviewjeff May 29 at 22:21
  • Yes it does. &nbsp; – Jaypan May 29 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: {}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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