Google Fontsの日本語フォント/Noto Sans Japaneseはやはり使わずにはいられなかった

スマホやタブレットでサイトを閲覧する場合、CSSで文章にフォントを指定しておいても殆ど反映しない。フォントをサーバーからブラウザに読み込ませなくては無理なわけなんだ。

Webフォントを使ってサーバーに使いたいフォントのファイルをアップロードするか、またはCSSに外部サイトから取り込んで使うこともできる。

前者よりも後者が手軽なので、やってみたいと思ってGoogle Fontsが質量共に充実しているけれども無料で提供されていて日本語フォントのNoto Sans Japaneseが何よりも素晴らしくて気に入ってしまった。

Noto Sans JapaneseはGoogle FontsのEarly access!から手軽に取り込むことができる。

サイトでの使い方としてはhtml編集のhead内にlinkタグで置くか、styleタグのところに@importで置くかしながら表示したいところにCSSのfont-family属性でNoto Sans Japaneseを指定するということだ。

<link href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css)

{font-family:'Noto Sans Japanese',sans-serif;}

とはいえ、失敗してサイトに直ぐに反映しなかったので、結構、難しかった。

Webフォントの取り込みの注意点


@importはCSSの上の方に置く。

CSSが上から順番に順番に読み込まれるせいで、所定のfont-family属性よりも下にWebフォントの@importがあると文章の表示が変わらないみたいだ。

linkタグでWebフォントを読み込ませるとfont-family属性への位置取りは関係なく反映するけど、@importは駄目なんだ。

因みに@importはブラウザによって表示速度に差があるようなので、なるべく使わない方が良いともいわれている。

サイトでフォントを変えると文章全体のデザインが崩れる可能性もある。CSSで調節するならば文字間はword-spacing属性、行間はline-height属性が欠かせないだろう。文章全体のバランスが取れるようなる。

Google FontsのNoto Sans Japaneseを使用した自作詩のトランセンダントのスクリーンショット
トランセンダント via Forevermore

数ヶ月前に、一度、試してGoogle FonsのEarly access!は軽めらしいけれどもNoto Sans Japanesは漢字が多くてどうしてもデータが嵩んでしまうわけで、サイトの表示が遅くなるというのがネックだった。

しかし最初にブラウザにフォントのデータがキャッシュされればその間は文章が遅くなることはないし、二三秒は待たされながらサイトに入ることにはなるけれどもさほど苦にしなくて構わないのではないか。

CSSの小技があるらしくてLinkタグでWebフォントを取り込む際にhref属性に続けてrel属性を置くと反対よりもサイトの表示が幾らか速くなるようなんだ。Google Fontsでも通常のWebフォントのソースコードはそのような形で配布されていた。Noto Sans JapaneseのEarly access!では@importantのタイプのものしか見付からなかったけれどもLinkタグに変えて使うならばhref属性に続けてrel属性を置きたいと思う。

あと将来的にも5G通信が実現されればサイトは大きなデータを持っていても素早く表示されるように変わるわけなので、次世代通信シムテム「5G」で、私たちの生活はどう変わるの?(ガジェット通信)によれば2020年頃が通信会社では目標とされているらしい、四年後だし、もう既にやっておくべきではないかとも感じた。どうせやるならば少しだけ辛くても今のうちだから耐えられなくはないだろう。

サイト運営にコンテンツの表示が遅れると不利にせよ、文章が読み易いと感じるのは利点なんだ。作家・詩人として作品を大事に考えればやはり利点こそ大きかったと悔やまざるを得なかった。

改めて思うのはサイト運営に不利だからNoto Sans Japaneseは5G通信まで待つつもりでいた管理人の気持ちだけではコンテンツの品質は又逆に下がり兼ねない。文章を読み易くしながら完成度を上げるようにしないと作品も伝わらないかも知れない。ならば心から納得できないわけなので、作家・詩人としてやっている事実を踏まえながら管理人の気持ちを固めるようにサイト運営に取り組まなくてはならない。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

ジャパネットたかたの丸尾詩織の商品説明に気持ちが入っていて素晴らしい理由

ブラックキャブの運転手という必死に努力してしか叶えられない夢に

BIGLOBE Wi-Fiが繋がらない場合の対処法