フォント２

 前回に引き続きフォントの話です。

このWebの世界には、Webフォントという技術があります。AntroposフォントもBlog内で利用可能かどうか見てみます。

ちなみに、AntroposフォントのWebフォントは、ここにありました。

HTMLのheader部分でフォントを読み込ませてあげます。

<link href='https://fonts.cdnfonts.com/css/antropos' rel='stylesheet' />

または、CSSの中にfont-faceを記載することでも指定できます。

@font-face{
font-family:antropos;
font-style:normal;
font-weight:900;
src:local('Antropos'),url(https://fonts.cdnfonts.com/s/2690/antrf___.woff) format('woff')
}

次に、CSSでフォント名をAntroposで指定してあげれば、WebフォントとしてAntroposフォントを表示できます。

<p style="font-family: 'Antropos', sans-serif;">WALDORF</p>

WALDORF

うまく、表示できないです。なぜか、サーバ側で503エラー。

@font-face {
  font-family: 'Antropos';
  font-style: normal;
  font-weight: 400;
  src: url("file:///c:/fonts/antrf___.woff") format('woff');
}

上記のようにPCにダウンロードして表示させるとフォントが表示できたので、フォントファイルに問題はないです。
https://fonts.cdnfonts.com/s/2690/antrf___.woffを直接アクセスすると503エラーにはならないので、CSSの中なら読み込む場合にエラーになるようです。

ちなみに、Google Webフォントでは、以下のようにタグをヘッダーに記載します。

 <link href='https://fonts.googleapis.com' rel='preconnect'/><link href='https://fonts.gstatic.com' rel='preconnect'/><link href='https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap' rel='stylesheet'/>

同じように、CSSで指定します。

 <p style="font-family: 'Jockey One'">WALDORF</p>

WALDORF

アントロポゾフフォントをWebフォントで使えなかったですが、ブログタイトルにはGoogle Webフォントをあててみました。
テーマのHTMLを以下のように編集するとタイトルのフォントを変更できました。

<Group description="Header">
  <Variable name="header.background.color" description="Background color" type="color" default="#fff"  value="#fcfdf3"/>
  <Variable name="header.title.font.small" description="Title font (small)" type="font" default="$(garamond18)"  value="normal 400 18px Jockey One, EB Garamond, serif"/>
  <Variable name="header.title.font.large" description="Title font (large)" type="font" default="$(garamond36)"  value="normal 400 36px Jockey One, EB Garamond, serif"/>