@font-face




Свойство Значение
font-family name
src url
srcfont-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style normal
italic
oblique
font-weight normal
bold
100
200
300
400
500
600
700
800
900
unicode-range U+0-10FFFF



css/style.css
  • @font-face {
  •  font-family: myFont1;
  •  src: url(font/rurintania.ttf);
  •  
  •  font-family: myFont2;
  •  src: url(font/squealer.ttf);
  • }
  •  
  • .a {
  •  font-family: myFont1;
  • }
  •  
  • .b {
  •  font-family: myFont2;
  • }
@font-face {
 font-family: myFont1;
 src: url(font/rurintania.ttf);

 font-family: myFont2;
 src: url(font/squealer.ttf);
}

.a {
 font-family: myFont1;
}

.b {
 font-family: myFont2;
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <p>Hello World!</p>
  •  <br />
  •  <p class="a">Hello World!</p>
  •  <br />
  •  <p class="b">Hello World!</p>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <p>Hello World!</p>
  •  <br />
  •  <p class="a">Hello World!</p>
  •  <br />
  •  <p class="b">Hello World!</p>
  • </body>
  • </html>