Why isn't the font I have added to the text working?

Question

https://code.sololearn.com/WA8A24a20a1A/?ref=app

Answer 1

the font is not loaded until it is used in the html... to fix your code, add to html a div with id "fontfix" and just a dot as content, plus add to css:

#fontfix {
font-family:Luckiest Guy;
opacity:0;
position:absolute;
left:0;
top:0;
}

Answer 2

Cuz the link you have taken was with the CSS rule.

But you didn't copied that from the website.

That's why it's not working

Answer 3

https://code.sololearn.com/W84H9oLl1EQl/?ref=app

Answer 4

Hm, oh okay!

Answer 5

the font is not loaded until it is used in the html... to fix your code, add to html:

<div id="fontfix">.</div>

and to css:

#fontfix {
font-family:Luckiest Guy;
opacity:0;
position:absolute;
left:0;
top:0;
}

Answer 6

or even:

#fontfix {
font:0px Luckiest Guy;
opacity:0;
position:absolute;
left:-100px;
top:-100px;
}

to be sure to not have it on viewport ;P

Answer 7

you could even put only a non breaking space as content of the fontfix div (&nbsp;)

Answer 8

Karak10

Try taking a font from google fonts website and select the style

You will get two things:
First: font link
Second: css font family property

The font property was not in your given code.

Your other code was working?
In sololearn or in a code editor?

Answer 9

Now Karak10 see visph code
He has written the font family property.

^_^

Answer 10

NEZ but this is how you are supposed to do this, it works fine for other projects.

Answer 11

NEZ not just added the font property in css: also applyed it to a visible (from browser point of view) but invisible (from human point of view), to force the font to be loaded, and so accessible from js canvas ^^

Answer 12

In JavaScript, try changing font in this line:
c.font = 'normal 37px

Like change normal to italic or bold or whatever font that u want to add. And even u can change the font-size also by changing 37px to 20px or whatever font-size u want.

https://code.sololearn.com/W3U9WjmlRndb/?ref=app

Hope this helps.