Answer the question
In order to leave comments, you need to log in
How to connect non-standard fonts so that they are drawn in the canvas?
Friends, I decided to share my experience on how to correctly connect non-standard fonts, display them on canvas and not go crazy.
1) So, if your style.css is in the root next to index.html, and the fonts are next to the fonts folder, then we connect it like this:
@font-face {
font-family: "Custom Font"; // обязательно двойные кавычки!
src: url('fonts/Custom Font Bold.otf');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Custom Font"; // обязательно двойные кавычки!
src: url('../fonts/Custom Font Bold.otf'); // добавляем " ../ "
font-weight: 700;
font-style: normal;
}
<!doctype html>
<html lang="en">
<head>
<title>Exemple</title>
<link href="style.css" rel="stylesheet" media="all">
<script src="script.js"></script>
</head>
<body>
<canvas id = "canvas"></canvas>
<div id="d1">.</div>
<div id="d2">.</div>
<div id="d3">.</div>
</body>
</html>
#d1 {
font: 700 1px Custom Font; // без кавычек
position: absolute;
color: #fff;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question