Webフォントの導入

仕事も順調なので、ここのタイトルに流行り(?)のwebフォント(Google Fonts)を導入してみた。 ネットを見るとテンプレートの頭のところにフォントのlink先をコピペして、実際に使うところにフォント名をセットすればおっけーらしいので、早速やってみた。 フォントを選択して必要ならオプションを選択するとフォントを読み込むhtmlのタグ

link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">


が表示されるのでさくっとコピペする。 ところがテンプレートを保存しようとすると

Error parsing XML, line 5, column 77: The reference to entity "display" must end with the ';' delimiter.


なんてエラーが出て保存できない。 displayって引用符の中だぜ。 あちこちネットを覗くと『&display=swap』の部分は無くてもよさそうなので

link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">


と変更して保存しようとすると、今度は

Error parsing XML, line 698, column 5: The element type "link" must be terminated by the matching end-tag "</link>".


なんてエラーが出てくる。 確かにlinkタグを閉じてはいないけど、閉じなきゃダメだなんてどこにも出ていない。 そこで適当なところに</link>を入れてみたけど保存は出来るけど引用部分がちゃんと認識されてない模様。 そしたらこれだと思い

link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet'/>


最後に閉じタグを入れてみるとやっと保存できた。 そして、適用する部分にフォント名を設定すると上手く行った。 こんなこと、どこにも書いてないけど、みんなちゃちゃっと使えてるのかしら?
--

No comments: