前の記事でFlexをレッツノートに入れた記事…というのを書きました。実はあのあと、いろいろ踏ん切りがつかなくてmintLinuxに浮気していたんですが、やっぱりどうも、いまひとつUIが気に入らず。特に気にいらなかったのはマウスの動きで、微妙にフラストレーションがたまります。
ChromeOS Flexをレッツノートに入れた話 - えびログ
ChromeOS Flex上のChromeでフォントを指定する方法
で、Flexを入れました。今回はもう意を決してSSDにインストールしました。リカバリー領域ごと抹殺するのでWindowsも起動できんくなってしまいましたが、そうそうそういうことをすることもないですしね。Chromeを使ってるぶんには、とても軽い、快適なChrome端末として使えている…んすが、とにかくフォントを変更したくてしょうがない。特に自分はLINE Seedを使ってるのでこれをどうしても設定したいのです。
そうだ、Stylusがあるじゃないか！
GoogleChromeデフォルトでは内蔵のフォントしか選べないのですが、幸いにして、FlexのChromeは、アドオンがもりもり使える仕様です。だから、ひそかにLINEとかも使えたりするわけなのですが、ここで使えるのが、ウェブサイトに強制的にCSSを適用するStylusというアドオン。そして、CSSにはウェブフォントを指定する機能があるわけです。
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Mochiy+Pop+P+One&display');
* {
font-family: 'Mochiy Pop P One';
}
てなわけで、たとえばこんなCSSを全てのサイトに適用することで、GoogleFontsのフォントを使ってウェブサイトを表示することができるようになります。これはとても簡単なやりかた。他にもBizPとかいろんなフォントが指定できるので、いろいろ試すと楽しいですね。
ひょっとしてwoff2も読めるのでは？
となると、いろいろやりたくなるわけですが、そういえばfontfaceでフォントを変えられたではないか…ということに思い至り。となれば、woffを置いてさえしまえば好きなフォントに変えられるのでは？というわけで、こちらのCSSを書くことにしました。
* {
font-family: main;
}@font-face {
font-family: "ヒラギノ角ゴ Pro W3";
src: url('ウェブフォントのURL') format('woff2');
}
@font-face {
font-family: "Meiryo";
src: url('ウェブフォントのURL') format('woff2');
}@font-face {
font-family: main;
src: url('ウェブフォントのURL') format('woff2');
}@font-face {
font-family: sans-serif;
src: url('ウェブフォントのURL') format('woff2');
}
ウェブフォントのURLには、あらかじめwoff2のファイルを置いてください。自分でサーバスペース用意して置くことになります。いくつかfont-familyで使われそうなものも置き換えてしまいましょう。これを指定すれば、woff2に変換できれば、たいがいのフォントを使うことができますよ！
それにしてもstylus便利だな！
stylusは、仕様としてはとてもシンプルなのですが、シンプルなだけにいろいろ使い勝手が良いです。chrome、firefob、edge…たいていのブラウザにアドオンがあってしかもクラウド同期までできるのでいろいろ楽しめます。自分はmastodonインスタンスとかtwitterのUIを見やすいように変更しています。いまのところstylusはiOSやAndroidでは使えないんですが、そのうちfirefoxで使えるようになるかもしれず、そうするとまたいろいろ遊べそうな気がします。
