Q
Q
qo_0p2015-11-07 17:16:04
css
qo_0p, 2015-11-07 17:16:04

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;
}

2) If style.css is in its own folder, and the fonts are in its own, then we write like this:
@font-face {
    font-family: "Custom Font"; // обязательно двойные кавычки!
    src: url('../fonts/Custom Font Bold.otf'); // добавляем " ../ "
    font-weight: 700;
    font-style: normal;
}

After that, you should connect the fonts and you can use them outside the canvas. But they won't be in the canvas. In order for them to appear in the canvas, you will need to do the following:
1) add divs to index.html by the number of fonts:
<!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>

2) In style.css we write the following:
#d1 {
    font: 700 1px Custom Font;  // без кавычек
    position: absolute;
    color: #fff; 
}

And so for each font. #d2 is the second font, #d3 is the third... Well, you get the idea.
For the second and subsequent font divs, add { top: -99; }
After that, the fonts should be drawn in the canvas.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Q
qo_0p, 2015-11-07
@qo_0p

Actually the question is the solution, so I will mark this post as the solution)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question