A-FrameにGoogleフォントを読み込んで使う ✏️

結論

HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

もしくは、

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

という感じで、普通に読み込むだけでOK。

blog.kimizuka.org

以前、頭の上にテキストを浮かべるARを作りました。

ARと音声認識を使って、頭の上に吹き出しを浮かべてみました。吹き出しの形状は音量に応じて変化させています。 pic.twitter.com/q5zzXZuWbh
— 君塚史高 (@ki_230) 2020年12月14日

こちら、折角ならフォントを変更したいなと思い、Googleフォントを使うことにしました。

ただ、Canvasでウェブフォントを使う際には、document.fonts.readyを使って、フォントの読み込みを待つ必要があるという記憶がありまして。

developer.mozilla.org

わざわざ書くのは面倒だなと思い、

<a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
  <a-assets>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
    <canvas id="canvas"></canvas>
  </a-assets>
  <a-marker marker type='pattern' url='./pattern.patt'>
    <a-plane
      material="shader: flat; src: #canvas;"
    ></a-plane>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>