クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS Google Fonts 日本語(試験的)

投稿日:

Google Fonts + 日本語 早期アクセス というサイトが出来ていますね!
Google Fonts の日本語(試験的)のようです。
まだ試験中なので、本番の Google Fontsサイト には無い日本語のフォントが提供されていますね。
評判が良ければ本番サイトに反映されるのかもしれません。

さっそく使ってみましょう!
基本的にはGoogle Fontsと同じように簡単に使えるようですね。

Google Fonts 日本語の使い方

  1. フォントを定義しているCSSを参照する
  2. 参照したフォントを「font-family」としてCSSに追記する

たったこれだけでOKです。

1. フォントを定義しているCSSを参照する

まずはHTML側でCSSを参照します。
今回は「はんなり明朝」「ニコモジ」「ニクキュウ」という日本語フォントを使ってみましょう。

2. 参照したフォントを「font-family」としてCSSに追記する

後はCSSのクラスに「font-family」として使いたいフォントを指定するだけでOKです。
簡単ですね!

これだけで Google Fonts の日本語が使えます。
サンプルを作成したので良ければ覗いてみてください。

試験中のようですので、まだ仕事では使わない方が良いかもしれませんね。

-CSS

執筆者:

関連記事

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS 正規表現でクラスを複数指定する

CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも1つずつ同じ属性を設定していくなんて事も多々あり …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …


comment

メールアドレスが公開されることはありません。