0

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

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

29th May 2021, 3:18 PM
Karak10
Karak10 - avatar
12 Respuestas
+ 3
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; }
29th May 2021, 3:41 PM
visph
visph - avatar
+ 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
29th May 2021, 3:26 PM
NEZ
NEZ - avatar
+ 2
Hm, oh okay!
29th May 2021, 4:20 PM
NEZ
NEZ - avatar
+ 1
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; }
29th May 2021, 3:40 PM
visph
visph - avatar
+ 1
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
29th May 2021, 3:44 PM
visph
visph - avatar
+ 1
you could even put only a non breaking space as content of the fontfix div (&nbsp;)
29th May 2021, 3:46 PM
visph
visph - avatar
+ 1
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?
29th May 2021, 3:51 PM
NEZ
NEZ - avatar
+ 1
Now Karak10 see visph code He has written the font family property. ^_^
29th May 2021, 3:53 PM
NEZ
NEZ - avatar
0
NEZ but this is how you are supposed to do this, it works fine for other projects.
29th May 2021, 3:33 PM
Karak10
Karak10 - avatar
0
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 ^^
29th May 2021, 3:56 PM
visph
visph - avatar
0
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.
29th May 2021, 4:37 PM
‎ ຸ