以下の手順に従って、<link>
内に<style>
または<head>
セクションを追加する必要があるGoogleフォントを使用しようとしています。私はサブテーマを使用しており、html.html.twig
でセクションを直接変更できます(それが正しい方法であれば)。
ただし、<head-placeholder>, <css-placeholder>
内の<jss-placeholder>
と<head>
に気づき、これらが他の場所からコードを挿入するために使用されることを意図しているかどうか疑問に思っています。
<head>
に追加するためのベストプラクティスは何ですか?
最初に、フォントにリンクするライブラリをテーマに定義します。
[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 }
このライブラリは、テーマの[THEME].info.yml
ファイルに追加することでロードされます。
libraries:
- [THEME]/fonts
[THEME].libraries.yml
で宣言され、[THEME].info.yml
によってロードされたすべてのCSSライブラリは、<css-placeholder>
に挿入されます。
[THEME].libraries.yml
で宣言され、[THEME].info.yml
によってロードされたすべてのJSライブラリは、<jss-placeholder>
に挿入されます。
[THEME].libraries.yml
でheader : true
で宣言され、[THEME].info.yml
によってロードされたすべてのJSライブラリは、<head-placeholder>
に挿入されます。
js-header:
header: true
js:
header.js: {}