【CSS】iPhoneで確認すると明朝体
今日もCSS関連の話題。
iPhone実機で確認すると何故か明朝体。
それぞれのタグにフォント指定しているのに何故だろう。。。と悩み、指定されているフォントをググってみると、googleフォント？？
正直CSSも詳しくないし、フォントも全然さっぱりなんですが、googleフォントを指定してるって事は、ヘッダーで読み込まないと反映されないんじゃないかと、ふと気がつく。
head内に以下のタグを追加
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&family=Noto+Sans+JP:wght@100;400;700&display=swap" rel="stylesheet">そしてiPhoneで表示！
直った！！！！！
googleフォントの読み込みのさせ方などの解説があったので、参考に
https://lpeg.info/webworks/google_fonts.html