CODEWITHSUNDEEP
javascripthtmlcssgoogle-fonts
Isaam Thalhath
Isaam Thalhath

Reputation: 49

How to include a cursive font from google fonts(with spaces in the font name) into a canvas element

Here is my code and I have the font loaded at the head before the script is loaded here is the code for that

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
context.fillStyle = "#ffffff";
context.fillRect(0, 0, 500, 1000);
context.beginPath();
context.fillStyle = "#000000";
context.font = "30px Pacifico, cursive";
context.fillText("Hello World", canvas.width / 2, canvas.height / 2);
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"/>

<canvas id="myCanvas"></canvas>

Upvotes: 1

Views: 649

Answers (1)

A Haworth
A Haworth

Reputation: 36426

The question was How to include a cursive font from google fonts(with spaces in the font name) into a canvas element

It turns out that the questioner did not need a space in the font being used and the code given worked fine (except for a missing img).

However, in case someone lands here wanting to know how to include a font from google fonts with spaces in the font name here's an example:

<link href='https://fonts.googleapis.com/css?family=PT Serif Caption' rel='stylesheet'>

i.e. just include the spaces, not need for translation to anything.

Upvotes: 2

Related Questions