Я пытаюсь заставить мой шрифт из "Fontasti c .me" работать. Я сделал собственный шрифт, но он не появляется.
@charset "UTF-8";
tbody{
color: red;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "cylexion";
src:url("../fonts/cylexion.eot");
src:url("../fonts/cylexion.eot?#iefix") format("embedded-opentype"),
url("../fonts/cylexion.woff") format("woff"),
url("../fonts/cylexion.ttf") format("truetype"),
url("../fonts/cylexion.svg#cylexion") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "cylexion" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "cylexion" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cylexion-a:before {
content: "\61";
}
.icon-cylexion-ah:before {
content: "\42";
}
.icon-cylexion-ai:before {
content: "\44";
}
.icon-cylexion-aw:before {
content: "\45";
}
.icon-cylexion-ay:before {
content: "\41";
}
.icon-cylexion-b:before {
content: "\62";
}
.icon-cylexion-c:before {
content: "\63";
}
.icon-cylexion-d:before {
content: "\64";
}
.icon-cylexion-e:before {
content: "\65";
}
.icon-cylexion-ear:before {
content: "\49";
}
.icon-cylexion-f:before {
content: "\66";
}
.icon-cylexion-g:before {
content: "\67";
}
.icon-cylexion-h:before {
content: "\68";
}
.icon-cylexion-i:before {
content: "\69";
}
.icon-cylexion-j:before {
content: "\6a";
}
.icon-cylexion-k:before {
content: "\6b";
}
.icon-cylexion-l:before {
content: "\6c";
}
.icon-cylexion-m:before {
content: "\6d";
}
.icon-cylexion-n:before {
content: "\6e";
}
.icon-cylexion-o:before {
content: "\6f";
}
.icon-cylexion-oh:before {
content: "\46";
}
.icon-cylexion-oo:before {
content: "\47";
}
.icon-cylexion-ow:before {
content: "\48";
}
.icon-cylexion-p:before {
content: "\70";
}
.icon-cylexion-q:before {
content: "\71";
}
.icon-cylexion-r:before {
content: "\72";
}
.icon-cylexion-s:before {
content: "\73";
}
.icon-cylexion-t:before {
content: "\74";
}
.icon-cylexion-u:before {
content: "\75";
}
.icon-cylexion-v:before {
content: "\76";
}
.icon-cylexion-w:before {
content: "\77";
}
.icon-cylexion-x:before {
content: "\78";
}
.icon-cylexion-y:before {
content: "\79";
}
.icon-cylexion-z:before {
content: "\7a";
}
.icon-cylexion-ee:before {
content: "\43";
}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<h1> edd</h1>
<link href="{% static 'css/styles.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fonts/cylexion.ttf' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fonts/cylexion.eot' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fonts/cylexion.svg' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fonts/cylexion.woff' %}" rel="stylesheet" type="text/css">
<head>
<title>a
</title>
</head>
<body>
<div class="icon">Test</div>
<h1> header
</h1>
<p >goo</p>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Я пытался ссылаться на них с помощью <div class="cylexion">"word"</div>.