対象
わんコメ / テンプレート
利用OS
Windows
利用バージョン: Windows、わんコメやOBSのバージョン
Windows: 11
わんコメ: 5.0.2
OBS: 29.1.3
PRO版を利用
している
した
ドキュメント確認 (公式サイト)
した
内容
こんばんは、はじめまして。
わたくし、今後実況配信などをしていくための準備中のものです。
わんコメ内で気に入っているフリーフォントを使ってコメントを表示させたいと思い、配信画面をクリエイター様に依頼した折、カスタムCSSをつけて頂き、カスタムSCCにてフォントの指定をしたのですが、一向に反映されず困っております。
とっても可愛らしいフォントなのでぜひ使いたいのですが…クリエイター様でも原因がわからず、私個人で、ドキュメントや他のログを確認しても、解決策がなかった為、有識者の方々にご回答いただければと思い、トピックを作成しました。
以下、必要だと思われる情報を掲示させて頂きます。
・使用したいと思っているフリーフォントは 『ヤマナカデザインワークス』様が配布しているフリーフォント「あおさぎ」です。
頒布サイト︎あおさぎ | ヤマナカデザインワークス
・最初に、クリエイター様から頂いたカスタムCSSをコピペし確認。
・不具合報告後、対策を教えて頂く(テストコメンターではなく配信で使用してほしいとの事でした)が反映されず、クリエイター様がMACしかわからない。との事で個人で原因を調べる事になる。
・ドキュメントにあった「フォントの変更について」というものを見つける。
・手順通り、使いたいフォントをDL後、名称の確認、font-family: ‘使いたいフォント名’ を使用しfont-family: 'あおさぎ’もしくはfont-family:: ‘あおさぎR’ と記入後、OKを押すも反映されない。
・頂いたカスタムCSSなしで直接body{}の中にfont-familyを追記するがやはり反映されず。
・最後の砦として、こちらにトピックを作成させて頂く。
添付として
頂いたカスタムCSS
反映されなていない様子
*右側はOBSのテキスト機能で表示させたあおさぎです。
フォントの名称 2枚
*1枚はユーザー名のみぬりつぶしております。
させて頂きます。なにとぞよろしくおねがいいたします。
ご質問ありがとうございます
原因の特定・対処の方法についてひとまず思いつくものを以下に示させていただきます。
①CSSの構造があっているかチェック
あおさぎ 以外の確実に存在するフォント名を指定して、フォントが変わるかどうかを試してみてください。
②①の結果フォント(あおさぎ以外)がちゃんと変わる場合
あおさぎフォントを指定するときに使っていたフォント名が使いたいフォント名(あおさぎ)と一致していない、という事になろうかと思いますので、正しいフォント名を探しあてて試していただく感じになります。
(このパターンの場合、使いたいフォントがきちんとPCにインストールされているかに関しても気になるところですが、今回はOBSのテキスト機能に反映されていることから問題ないと思います)
③①の結果フォントが(あおさぎ以外でも)ちゃんと変わらない場合
CSSの構造の問題か、その他何らかの原因でCSS自体が働いていない状態かと思われますので、その方面の調査を行う感じになります。
以上、一旦こちらでお試しいただけますと幸いです。
sikozon様
こんにちは、速やかな対応痛み入ります。
早速、記入いただいた対処でどの様な動作になるか確認させて頂きました。
結果としては、③のどのフォントを使用しても、カスタムCSSは反応せず、デフォルトらしき文字以外は表示されませんでした。
トピック作成時にもお伝えした通り、頂いたカスタムCSSを使用した場合もデフォルトの状態でfont-family: ‘使いたいフォント名’ を使用した場合でも同じ様な動作になりました。
動作の不具合がきになりましたので、わんコメさんの公式テンプレエディタを使用し、エディタ中で選択できるフォントであれば使用できました。
再度、添付画像を付けさせていただきます。
反映されていない状態
OBSのテキストから見たフォントの名前
Windows11の設定から見たフォント情報
公式のCSSが反応しているもの
以上になります。
使用したカスタムCSSを乗せようと思ったのですが…とても長かったので省略いたしました。
何卒宜しくお願いいたします。
ASTIE
4
こんにちは
該当のフォントはWebフォントでの使用は明確にはサポートされていないようですね
フォントの中身を確認したところ完全名とフォント名が不一致だったためCSSからのフォント参照の表記は下記のようになっていました
font-family: "aosagi R";
こちらでどうでしょうか?
※ なおこれはんコメの不具合ではなくフォント側の表記の問題かと思います
お試しありがとうございます
アスティさんもお調べありがとうございます
本命のコードに正確なフォント名の指定でうまく動けば万事解決かと思いますが、
③の「いずれのフォント指定でも変化しなかった」という流れも踏まえまして、
こちらでは引き続き、原因の特定・対処の方法を探る方向で続けていきます。
まず、小さな範囲でのテストで問題点を洗い出していきます。
・新しくbasicをOBSにいれ、そのカスタムCSSに次の④~⑤をそれぞれ追記し結果を確認します。(画像赤枠参照)
※注意点としまして画像の赤矢印のOKを押すまでは変更が適用されませんので、
(張り付けたものがリアルタイムで反映されるものではありませんので、)
変化が確認できるのは一度OKを押してからとなります。
④一般的なフォント変更のテスト
body { font-family: "UD Digi Kyokasho N-B"; font-size: 2em; }
⑤あおさぎフォントの指定テスト
body { font-family: "aosagi R"; font-size: 2em; }
※「font-size: 2em;」というのは文字を大きくするための記述で、文字種指定のテストだけなら不要なものですが、CSS自体が作動しているかの確認のために追加しています。
結果について1
・④が成功で⑤が失敗の場合は、フォント名があっていないか、
との事ですので、webフォントとしてのふるまいに対応していない可能性が考えられます。
・④が失敗する場合は、ソフトウェア的なエラー他、何らかの要因でそもそもの環境が正常な状態でない可能性が出てまいります。
結果について2
・④も⑤も成功の場合
⑥本命のCSSに⑤を追記して変化があるか試してみてください。
・⑥の結果、変化がない場合はフォントの種類だけでなく、フォントの大きさ変更も通らないという事で、CSSの記述自体が上手く作動していない状況になっている可能性が考えられます。
(CSS受け渡し~カスタムCSSに貼り付けるまでの間に経由したソフトやアプリによっては、囲い記号などが変化してコードが壊れるといったケースもございます)