Menu
I'm trying to import google fonts into javascript, so I can use the fonts to draw text on my canvas. The problem is that I am receiving errors.
Error 1:Failed to decode download fonts
Error 2:OTS parsing error
This is for a web page I'm developing, and I looked up the problems, but the solutions they suggested, I don't understand.
<!DOCTYPE html>
<html lang = "en">
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var pacifico_font = new FontFace('Pacifico', 'url(https://fonts.googleapis.com/css?family=Pacifico&display=swap)');
pacifico_font.load().then(function(loaded_face) {
document.fonts.add(loaded_face);
document.body.style.fontFamily = '"Pacifico", Pacifico';
}).catch(function(error) {
alert("An error occured, please continue.");
});
document.fonts.ready.then(function(font_face_set) {
var x = true;
return x;
});
ctx.fillStyle=rgb(0,0,0);
if(x===true){
ctx.font="20px Pacifico";
ctx.fillText("Hello Cody(testing)",200,200);
}
</script>
</body>
</html>
I expect the canvas to show text, but it alert me to that there was an error, and there is nothing.
In the console it says:
Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Pacifico&display=swap
OTS parsing error: invalid version tag
974
asked Dec 06 '25 14:12
You are loading a stylesheet not a font.
Here is the solution:
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico&display=swap">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<!--window.onload won't work without this because there is nothing waiting for the link to load-->
<span id="loader" style="font-family: Pacifico;">I am used for loading</span>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle="rgb(0,0,0)";
window.onload = function() {
document.getElementById("loader").style.display="none"
ctx.font="20px Pacifico";
ctx.fillText("I am inside of canvas",200,200);
ctx.stroke();
}
</script>
</body>
</html>The font link you're using is actually a link to a stylesheet.
You can get the direct link to the font by visiting the stylesheet link.
It'll display the following CSS:
/* cyrillic-ext */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6K6MmBp0u-zK4.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6D6MmBp0u-zK4.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6I6MmBp0u-zK4.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6J6MmBp0u-zK4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Just grab the link to whichever version of the font you'd like to use and add it in place of where you're currently adding the stylesheet.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
