アトリエロワ

webフォントを使う

webフォントをサーバーに入れて使う。

「webfonts」ディレクトリ（名前は任意）に使いたいfontを入れる。
KozGoPro-Bold.otf など、この例では6件

cssファイルに下記を記載。urlパスは自分が設置したところを呼び出す。

@font-face {
  font-family: "kozuka";
  src: url("../webfonts/KozGoPro-ExtraLight.otf");
  font-weight: 200; /*EL*/
}
@font-face {
  font-family: "kozuka";
  src: url("../webfonts/KozGoPro-Light.otf");
  font-weight: 300; /*L*/
}
@font-face {
  font-family: "kozuka";
  src: url("../webfonts/KozGoPro-Regular.otf");
  font-weight: 400; /*R*/
}
@font-face {
  font-family: "kozuka";
  src: url("../webfonts/KozGoPro-Medium.otf");
  font-weight: 500; /*M*/
}
@font-face {
  font-family: "kozuka";
  src: url("../webfonts/KozGoPro-Bold.otf");
  font-weight: 700; /*B*/
}
@font-face {
  font-family: "kozuka";
  src: url("../webfonts/KozGoPro-Heavy.otf");
  font-weight: 900; /*H*/
}

使いたいところでfont-familyを設定。

* {
  font-family: "kozuka", "游ゴシック体", YuGothic, helvetica, Arial,
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,sans-serif;

font-weight: 500;
}
h1 {font-weight: 900;}

font-weightのbold　：　数値の700

数値 ウェイト
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal　/　Regular
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

HOME > html+css > webフォントを使う

html+css

html+css

+ More