Googleサイトで好きなフォントを使う方法
こんにちは。かえるです。今回は、現行のgoogleサイトでデフォルトフォントやgoogleフォントにないオリジナルのフォントを表示させる方法について解説していきます。僕が探し求めて色々と調べた結果たどり着いた方法です。
それではどうぞ！
仕組み
（すぐに方法を知りたい方はこの章は読み飛ばしてもらって構いません）
現行(2022/10/09時点)のgoogleサイトではフォントをアップロードしたり読み込んだりする機能がないので、基本的にオリジナルのフォントを表示させることは出来ません。
そこで「埋め込み」機能を使って無理やりフォントを読み込みます。埋め込み機能ではhtmlを読み込むことが出来、その中でさらにCSSも読み込めます。それを利用して、base64形式にエンコードしたフォントをCSSに埋め込むことによってフォントを変更するという算段です。
実際の方法
それでは実践していきます。今回はサンプルとして「マメロン」というフリーフォントを使っています。
まずはマメロンをダウンロードして、サブセットフォントメーカーを使ってサブセット(文字数を減らしたフォント)にします。形式は元のotfで大丈夫です。
次に同じ武蔵システムのWOFFコンバータを使って形式を変換してサイズを小さくしていきます。このときに「WOFF2を作成する」にチェックを入れておくと時間はかかりますがサイズをさらに小さくできるのでおすすめです。今回はJIS第一水準(約3000字)まで文字数を減らしてwoff2にして603KBまで落としました。
それが出来たら、このサイトを使ってフォントをbase64(英数記号だけで構成される64進数のデータ)に変換します。ファイルをアップロードすると英数記号の文字列が出てくるので「select all」を押してからコピーしてください。
最後に、googleサイトにアクセスして作っているページを開きます。「挿入」の「埋め込む」を選択し、「埋め込みコード」タブに次のコードを貼り付けます。
HTML
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
@font-face {
font-family: "font1";
src: url("data:application/font-woff; charset=utf-8; base64,#ここに貼り付け#") format("woff2");
}
.myfont {
font-family: "font1";
}
</style>
</head>
<body>
<p class="myfont">#ここに文章#</p>
</body>
</html>
このコードはまずテキストエディタなどに貼り付けて編集してからgoogleサイトにコピーするのがおすすめです(重くなるので)。「#ここに貼り付け#」のところをbase64の英数記号の羅列に置き換えます。「#ここに文章#」のところに文を書いたら「次へ」を押してプレビューに設定したフォントが表示されたら成功です！「保存」を押してページに組み込みましょう。
また、文字の大きさや色、段落などを変更するには挿入する前の段階でhtmlを編集するしかないので、htmlがわからない方は調べるなどして使うのがいいかと思います。
↑うまくフォントが反映されました。
まとめ
ということで、今回は好きなフォントをgoogleサイトで使うことに成功しました。
では、今回はこのへんで。ぜひまたこのブログに来て下さい！
それでは、よいPCライフを！
