Je vous partage une portion de code dont j'ai eu besoin de me servir à plusieurs reprises pour injecter des Google Fonts. J'avais tendance à l'injecter comme un goret dans le fichier de template html.html.twig mais ma conscience a fini par me rattraper pour faire cela proprement. Dans l'exemple je cherche à injecter l'appel à une police d'écriture de Google mais il peut vous servir à injecter n'importe quoi d'autre.

Si vous regardez html.html.twig, vous voyez que le contenu injecté dans <head></head> est généré de la façon suivante :

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>

// Reste de la page.

Reste donc à comprendre comment le contenu de <head-placeholder> est généré. Mon réflexe dans ces cas là consiste à chercher dans le code du coeur si une portion de code significative (dans le sens "qui n'apparaît pas trop souvent comme résultat de recherche) m'aide à trouver comment ce bloc est créé. Pour cet exemple, je tente une recherche avec le mot-clé head-placeholder. Manque de bol, rien de significatif ne ressort.
Dans ce cas là, je change de tactique, je regarde le HTML final généré et tente une nouvelle recherche avec un autre élément significatif. Je relance cette fois ma recherche avec le mot-clé MobileOptimized. Bingo, je tombe sur le code de system_page_attachments() qui injecte cette balise. Je comprends dès lors que c'est le hook_page_attachments() qui se charge de la génération en injectant la balise qui m'intéresse.

<?php
/**
 * Implements hook_page_attachments().
 */
function system_page_attachments(array &$page) {
  //...
  // Attach default meta tags.
  $meta_default = array(
    //...
    // Attach default mobile meta tags for responsive design.
    'MobileOptimized' => array(
      '#tag' => 'meta',
      '#attributes' => array(
        'name' => 'MobileOptimized',
        'content' => 'width',
      ),
    ),
    // ...
  );
  foreach ($meta_default as $key => $value) {
    $page['#attached']['html_head'][] = [$value, $key];
  }
  // ...
}

Il ne me reste alors plus qu'à adapter cela à mes besoins pour injecter une Google Font sur toutes mes pages. Cela donne le snippet suivant.

<?php

/**
 * Implements hook_page_attachments().
 */
function monmodule_page_attachments(array &$attachments) {
  $google_font = array(
    '#tag' => 'link',
    '#attributes' => array(
      'rel' => 'stylesheet',
      'href' => 'https://fonts.googleapis.com/css?family=ABeeZee|Lora:400,700',
    ),
  );
  $attachments['#attached']['html_head'][] = [$google_font, 'google'];
}

Si vous voulez aller plus loin pour améliorer les performances et éviter le tracking de Google il est recommandé de récupérer les polices en local. Vous vous épargnerez les appels à un domaine externe. Sur les bon conseils de Monsieur opidentica, jetez un œil à ce script pour récupérer les polices Google fonts en local.

Commentaires

[#] DuaelFr • ven 07/10/2016 - 12:15

Précision complémentaire :

On ne peut implémenter de hook_page_attachments() que dans un module.
Dans un thème il faudra préférer hook_page_attachments_alter() qui fonctionne à peu près de la même manière.

[#] Matthieu (non vérifié) • ven 07/10/2016 - 13:29

Pour importer une police de caractère externe, j'utilise la méthode du librairies.yml de mon thème, à savoir (par exemple) :

fonts:
  css:
    theme:
      //maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css: { type: external, minified: true }
      //fonts.googleapis.com/css?family=Lato: { type: external }

Et dans le fichier de déclaration de mon thème montheme.info.yml (mon avoir la police de caractère sur toutes les pages) : libraries: - montheme/fonts J'ai bon quand même ? ;-)

[#] Artusamak • lun 10/10/2016 - 09:45

C'est aussi une solution qui fonctionne en effet.

Ajouter un commentaire

Restricted HTML

  • Balises HTML autorisées : <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et les adresses courriel se transforment en liens automatiquement.
By submitting this form, you accept the Mollom privacy policy.