【Streamlabs】webフォントで美しい？チャットオーバーレイにする方法

2019年10月10日

みなさんおはこんばんちは(＠ReinyaNchannel)です

配信をこよなく愛している者です。Twitchという配信サイトで活動しています。是非以下のからフォローお願いします

https://www.twitch.tv/reinyan_channel

前回の日本語フォントを修正する方法の記事を書きましたが、今回紹介するのは「webフォント」を使って美しいチャットオーバーレイにする方法です
そんなに難しくないのでレッツトライ

ちなみに web font を使うとこんな感じにオーバーレイで表示されます

参考記事

前回の記事で日本語フォントを修正する方法の記事で参考にどうぞ

チェック

: 【Streamlabs】チャットオーバーレイの日本語フォント(書体)を治す方法

Mixer、Twitch、YouTubeの配信者で Streamlabs のチャットオーバーレイを使用する際日本語のフォ ...

続きを見る

この記事はこんな方におすすめ

webフォントを使って美しく表示させたい方
知り合いの配信者に共有したい方

Mixer,Twitch,YouTubeでもwebフォントが使える

Streamlabs にアクセスし、自分の環境に合わせてログインする
ログインすると、左側のカテゴリ欄から「All Widget」を選択肢から「Chat Box」をクリック

下の方にスクロールすると「Enable Custom」を Enable にし、CSS の一部コードを変換していきます

ポイント

Mixer
Twitch
YouTube

これ3つの配信サイトでも WEBフォント使えるのでポイントだ！

では、実際にコード変換する作業に移るぞ

まずはじめに、使いたいWEBフォントをGoogleフォントから探してこよう

早期アクセスフォントもあるぞ

早期アクセスのフォントはこちら

文字サイズ指定などの参考する場合はこの記事がわかりやすいぞ

チェック

: 【2019年版】Google Fontsの使い方：初心者向けに解説！

最も有名なWebフォント「Google Fonts」の使い方と導入方法を、初心者の方でも分かるように解説します。

続きを見る

そして、今回変更するフォントは「ニコモジ」っていうフォントを使っていきます

HTMLコードとCSSコード

コピーするHTMLコード

https://fonts.googleapis.com/earlyaccess/nicomoji.css

コピーするCSSコード

font-family: "Nico Moji"

変更するコード場所

変更前

@import url(https://fonts.googleapis.com/css?family=Roboto:700);

* {
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: 'Roboto';
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}

赤マーカーが付いてるところ変更していくぞ

変更後

@import url(https://fonts.googleapis.com/earlyaccess/nicomoji.css);

* {
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: "Nico Moji";
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}

青マーカーのところが変更箇所

あとはお好みでフォントサイズや余白など各自設定してください
説明はここまで！

あとは保存するだけでOKです