SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

【css】Webフォント、ローカルフォントの指定方法

Webフォントやローカルにあるフォントファイルを使ってテキストを表示したいときは、以下のような書き方になる。

@font-face {
	font-family: 'MyFont';
	src: url(/location/of/font/myfont.ttf);
}

body {
	font-family: MyFont;
}
@font-face {
	font-family: 'MyFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: local('myfont Regular'), /* フォントがローカルにインストールされている場合に有効 */
	     url('webfont.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */
	     url('webfont.woff') format('woff'), /* woff - Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* ttf - Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* svg - Legacy iOS */
}

body {
	font-family: MyFont; /* @font-faceで定義したフォント名を指定 */
}

やっているのは

1、@font-faceルールでフォント名とフォントデータを指定

2、1で指定したフォント名を使う


使用例

Webフォントを使う

Google Web Fontsを利用すると、1の作業をやってくれるので、言われたとおりに支給されたスタイルシートを読み込んでおけば、font-familyにフォント名を指定するだけでフォントが使用できる。

あえて全部書くと、こんな風になる。

@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url(https://themes.googleusercontent.com/static/fonts/kaushanscript/v1/qx1LSqts-NtiKcLw4N03IFhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
}

.font-demo1 {
  font-family:'Kaushan Script';
  font-size:200%;
}

Demo

Softel Memo!!!


ローカルにインストールされているフォントを使う

単独で指定するなら、素直にfont-familyにその名前を指定すればよいですが、「ローカルのこれか、ローカルのこれか、なかったらWebフォントのこれ」のような指定をするときには local(フォント名) も使う。

@font-face {
  font-family: 'MyFont';
  src: local('KozMinPro-Regular');
}

.font-demo2 {
  font-family:'MyFont';
  font-size:200%;
}

Demo

ソフテル めも


ローカルのフォントファイルを使う

通常は「Not allowed to load local resource」のようなエラーで表示されないが、ローカルに置いたHTMLを開くときなどには使える。

@font-face {
  font-family: 'MyFont3';
  src: url("file:///C:/Windows/Fonts/KozMinPro-Regular.otf");
}

.font-demo3 {
  font-family:'MyFont3';
  font-size:200%;
}

Demo

ソフテル めも


参考

@font-face – CSS | MDN

CSS3 「gradient」と「@font-face」

http://randsco.com/index.php/2009/07/04/p680

http://www.fontspring.com/blog/fixing-ie9-font-face-problems

関連するメモ

コメント