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

Tweet

Category css, html5 2012/10/09

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で定義したフォント名を指定 */
}

やっているのは

使用例

Webフォントを使う

Google Web Fontsを利用すると、１の作業をやってくれるので、言われたとおりに支給されたスタイルシートを読み込んでおけば、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

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

単独で指定するなら、素直に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