概要
Adobe Muse CC（以下Muse）はプログラミングをしなくてもそこそこのWebサイトができる優れたツールですが、
この手のツールによくありがちな独自Fontの設定方法が面倒です。
ググっていると、Museは非プログラマな方が使っていることが多いためか、
あちこちで悲鳴が聞こえていたので、情報を共有しようと思いました。
非プログラマがQiita見ているかが謎ですが。。。
Museの細かい説明は割愛します。
MuseとFont
MuseはAdobe Type Kitと連動できるので、日本語フォントも使い放題だぜ！！
と誰しもが思うのですが、残念ながらMuseのUIから連動できるType Kitには日本語が存在しません。
Noto Sans JPの兄弟（同一人物？）の源ノ角ゴシックが使えないのです。
アルファベット圏のWebFontを使う場合はAdobe Type Kitと美しく連動可能です。
日本語は自分でなんとかしないとダメです。
以下、なんとかする方法を説明します。
NotoSansJPの使い方
これは色々なところに書かれていますので、超簡単にまとめますと。
本家がフォントの説明でして、ガイドラインを読むとEarlyAccessに色々書いてあることがわかります。
通常の使い方
HTMLのHeadタグにて以下のCSSを読み込みます
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
このcssファイルにFontリソースのURLが記載されています。
本家の書き方はここです。
ただし、Noto Sans Japaneseです。（JPとJapaneseの違いは調べてください。とりあえず、今はJPを使う方がいいと思います。）
色々ググっていると、非SSLのサーバーにアクセスしていたりと、怪しいサンプルが散見されました。
私はこういう時は必ず本家を見るようにした方がいいと考えています。
CSSでフォントを指定します
ぐぐってよく出てくるのは、bodyに直接書くサンプル。
でもこういうときは、本家を見るのがいいです。
ここに書いてあります。
まあ、何はともあれ、cssでフォントの指定をするのだということを覚えておけばいいです。
本家のサンプルをJPに変えます。代替フォントを指定したい人は指定してください。
.wf-notosansjapanese { font-family: "Noto Sans JP"; }
普通であればこれで終わりですが、Museではこうはいきません
Museの設定方法
前項の設定をMuseで行えばいいのですが、さてどうするか。
notosansjp.cssを読み込む方法
HTMLのHeadタグに
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
を読み込む必要があるのですが、これはCustom linkを差し込む方法がきちんと用意されています。
メニューの
ページ/ページプロパティ
を選択するとページプロパティダイアログが起動します。
ここでメタデータタブを押すと、headに挿入するhtmlを書くことができますので、
そこに、上のnotosanjp.cssへのlinkをそのままコピペします。
CSSでフォントを指定
これがめんどくさいです。MuseにはHTMLを挿入する機能があります。
本家の説明
ここに、
タグを埋め込むことももちろんできます。
なので、フォントを変更したい文章に対して
<p style="font-family : 'Noto Sans JP'">あのイーハトーヴォのすきとおった風</p>
といちいち書き込めば大丈夫です。
ポイント１
いちいち書き込んで面倒ですが、この方法だと、フォントの色・サイズと行送り、揃え等は、Museでテキスト設定で可能！！
ただし、Weightは設定できない。
ポイント２
なんと、Museの表示上もフォントがNoto Sans JPに変更されます。レイアウト確認もできますよ！
ポイント3
HTML編集が遅い。これは仕方ないですが、我慢するしかないです。
ポイント4
横着してbody全体とかpタグ全体とかにfontをまとめて設定しても無駄です。
Museは子供要素に細かくフォント設定を書きにくるので、親の設定はCSSルールで負けます
もっと楽する方法
個人的に、タグに直接styleを書くのは好きではありません。
よって、以下のようなCSSを準備します。
.notosans {
font-family: 'Noto Sans JP', sans-serif;
}
/* Thin */
.weight100 {
font-weight:100;
}
/* Light */
.weight300 {
font-weight:300;
}
/* Regular */
.weight400 {
font-weight:400;
}
/* Medium */
.weight500 {
font-weight:500;
}
/* Bold */
.weight700 {
font-weight:700;
}
/* Black */
.weight900 {
font-weight:900;
}
で、このCSSをMuseに食わせれば、classを指定することでフォントの操作ができます。
cssの置き場所ですが、本番環境であれば、Museから出力したcssと混ぜて置けばいいです。
開発中はローカルサーバーが立ち上がるのですが、何をやっているかよくわからないので、
たとえばクラウドに置くのがいいかと思います。
AWSならS3に突っ込んでpublic設定すればURLが得られます、
Google Cloud PlatformならCloud Storageでも同じことができます。
もちろん、FireBase StorageでもOK。
ただし、localhostからアクセスするためCORSにはご注意下さい。
私はGoogle党なので、
Cloud StorageとFireBaseのCORS設定の方法を共有しておきます。ここです。
このように、なんらかの方法でCSSをサーバー上に配置して、
例えば、Firebase Storageで公開した場合でDownload用のURLが(以下はダミーです)
https://firebasestorage.googleapis.com/v0/b/hogehogehoge.appspot.com/css/myfont.css
だった場合は、上で説明した
notosans.css
を読み込むときに行った方法で以下のようにHeadにlinkを挿入すれば良いのです。
MuseでのUI上*headに挿入するHTML：*は以下のようになるはずです。
（notosansjp.cssを読み込んでから、myfont.cssを読み込んだ方が気持ち悪くなくていいです。）
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link rel="stylesheet" type="text/css" href="https://firebasestorage.googleapis.com/v0/b/hogehogehoge.appspot.com/css/myfont.css
"/>
こうすると、コンテンツを読み込むときに自分のカスタムCSSが読み込めるため、
<!-- Mediumで書きたい -->
<p class="notosans weight500">あのイーハトーヴォのすきとおった風</p>
<!-- Boldで書きたい -->
<p class="notosans weight700">あのイーハトーヴォのすきとおった風</p>
というように簡潔に書くことができてメンテも楽なのでおすすめです。
終わりに
Museはもう新規機能開発は終わってしまい消えていく運命ですが、
新規事業等でWebサイトをともかく立ち上げないといけない！
というときには、とても便利です。
デザイナーさんがIllustratorで作ったデザインをサクサク実現できます。
ただ、日本語となるとフォントの設定で困ってしまい、
思ったようなデザインにできないと嘆いている方を何人か見かけましたので
サクッとまとめてみました。