スマホやタブレットでサイトを閲覧する場合、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を指定するということだ。
Noto Sans Japaneseのlinkタグ
<link href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">Noto Sans Japaneseの@import
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css)Noto Sans Japaneseの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のEarly access!は軽めらしいけれどもNoto Sans Japanesなどの日本語フォントは漢字が多くてどうしてもデータが嵩んでしまってサイトの表示速度が遅くなるのがネックだった。
追記：Google FontsのEarly access!を軽量化する方法が見付かって新たに使い出した。
しかし最初にブラウザにフォントのデータがキャッシュされればその間は文章が遅くなることはないし、二三秒は待たされながらサイトに入ることにはなるけれどもさほど苦にしなくて構わないのではないか。
CSSの小技があるらしくてLinkタグでWebフォントを取り込む際にhref属性に続けてrel属性を置くと反対よりもサイトの表示が幾らか速くなるようなんだ。Google Fontsでも通常のWebフォントのソースコードはそのような形で配布されていた。Noto Sans JapaneseのEarly access!では@importantのタイプのものしか見付からなかったけれどもlinkタグに変えて使うならばhref属性に続けてrel属性を置きたいと思う。
あと将来的にも5G通信が実現されればサイトは大きなデータを持っていても素早く表示されるように変わるわけなので、次世代通信システム『5G』で、私たちの生活はどう変わるの？（TIME＆SPACE）によれば2020年頃が通信会社では目標とされているらしい、四年後だし、もう既にやっておくべきではないかとも感じた。どうせやるならば少しだけ辛くても今のうちだから耐えられなくはないだろう。
サイト運営にコンテンツの表示が遅れると不利にせよ、文章が読み易いと感じるのは利点なんだ。作家・詩人として作品を大事に考えればやはり利点こそ大きかったと悔やまざるを得なかった。
改めて思うのはサイト運営に不利だからNoto Sans Japaneseは5G通信まで待つつもりでいた管理人の気持ちだけではコンテンツの品質は又逆に下がり兼ねない。文章を読み易くしながら完成度を上げるようにしないと作品も伝わらないかも知れない。ならば心から納得できないわけなので、作家・詩人としてやっている事実を踏まえながら管理人の気持ちを固めるようにサイト運営に取り組まなくてはならない。
参考：【Font】Google Web Fonts で日本語フォントの［Noto Sans Japanese］を使う。 Google Fontsの日本語フォント「Noto Fonts」の使い方
コメント