- このトピックは空です。
-
投稿
-
お世話になっております。場違いな質問でしたら申し訳ございません…。
@font-faceの書き方についてご助言を頂きたく書き込みを失礼致します。
h1｛font-family:1noFont,serif;｝
h2｛font-family:2noFont,serif;｝というように、
複数のフォントを呼び出したいのですが、１のフォントは適用され、２のフォントがデフォルトになる状況で、記述の正しさが分からず困っています。
@font-face{
font-family:”1noFont”;
src: url(自サイト.1noFont.woff)略｝
@font-face{
font-family:”2noFont”;
src: url(自サイト.2noFont.woff)略｝
という記述で合っているでしょうか…。
「@font-face 複数フォント〜」などで検索してみるのですが、同一フォントのイタリックや太字の指定方法は出てくるのですが、Noto sansとM plusを使いたいというような、異なるフォントの共存記述方法に辿り着けず書き込みさせて頂きました。
ご助言の他urlの誘導などでも結構です。場違いな質問でしたらご指摘確認次第削除致します。お手数をお掛け致しますがよろしくお願い致します。
ローカル環境かつ別のフォントを利用してではありますが、MDNの@font-faceの解説ページを参考にしながら2種類のフォントを読み込んでみたところ、
@font-face{内容}を2つ連続して記述しても2つのフォントが問題なく読み込めました。https://developer.mozilla.org/ja/docs/Web/CSS/@font-face
1noFontが読み込めたなら2noFontの記述が間違っているか、「略」の部分に間違いがあるのかもしれません。
また、あーもんどさんが書かれたタグをコピペしたところ全角の記号が入っていたり、「’」や「”」（クオーテーション）にするべきところが「”」（アポストロフィ）になっている箇所があったのが気になりました。1noFontが読み込めるならフォーラムに書き込む際に変換されただけかもしれませんが…。
「’」や「”」（クオーテーション）にするべきところが「”」（アポストロフィ）になっている箇所があったのが気になりました。
フォーラムに書き込んだらアポストロフィに変換されてしまいました…。上記の文章はフォーラムの仕様っぽいので無視してください。
さる子様
確認が遅くなり申し訳ございません！ご返答とわざわざのご検証くださってありがとうございます。解説ページのurlも辿り着けなかったので有り難く拝見しました。
そうなんです。1noFontの記述をコピペで同条件にしても駄目(urlとファイル名だけ変更、ファイル名から直接コピペしているので名前も一致)でした。
さらに気づいたのですが、
@font-face {
font-family: “1noFont”;
src:
url(“site/font/1noFont.woff”)
format(“woff”);
}
@font-face {
font-family: “2noFont”;
src:
url(“site/font/2noFont.woff”)
format(“woff”);
}
で1noFontのみが適用され、
@font-face{
font-family:”2noFont”;
src: url(site/font/2noFont.woff)略｝
@font-face{
font-family:”1noFont”;
src: url(site/font/1noFont.woff)略｝
入れ替えてみると、今度は1noFontがデフォルトに戻り2noFontが適用されるという優先順位が発生する(？)ようでどうなっているのか…。
もうすこし頑張ってみたいですが、どうにもならなかったら大人しくグーグルさんからwebフォント呼び出します。
お時間を割いてくださりありがとうございます！
