search

rezoner / playground

Playground.js is a framework for your javascript based games. It gives you out-of-box access to essentials like mouse, keyboard, sound and well designed architecture that you can expand to your needs.
MIT License
459 stars 50 forks source link

Feature request: Font loader #28

Closed Nielsticot closed 8 years ago

Nielsticot commented 8 years ago

Hi, I don't know if it's the right place to ask but is it possible to add a loader for local fonts ?

rezoner commented 8 years ago

Check this out mate - http://playgroundjs.com/playground-fonts

You will need a fresh version of playground as I have just added it for your request.

Not sure if it works - I have only tested Chrome / Firefox on Linux

Nielsticot commented 8 years ago

Wow, that's amazing ! Thank you so much, it's just what I need ! I just tested the demo on your link and it works with Chrome on Windows & Android too. I just noticed one issue, I had to reload the page once before it works on both Android & Windows.

rezoner commented 8 years ago

It is very likely that you have visited the page before and the old script from cache had to be replaced. I am terrible at caching control.

Nielsticot commented 8 years ago

Ok, I just tested it on my Nexus 7 where I never visited the playgroundjs doc and it works perfectly, thank you again !

rezoner commented 8 years ago

Also note that web fonts are quite annoying subject - they often don't work for no good reason. So if you run into such case don't get frustrated, just download another font. Sometimes using online converter like this one helps to "repair" font http://www.fontsquirrel.com/tools/webfont-generator

Nielsticot commented 8 years ago

I just tried to load a font in my game but when I do it, I get the error Cannot read property 'insertRule' of undefined at playground.js:1668, I think it's because I don't have a stylesheet.

Edit: I just added <style></style> to my index.html, it works fine.

rezoner commented 8 years ago

Thanks for pointing that out - I was pretty sure that there's always at least one stylesheet that comes from browser defaults. Will find out some solution

jackrugile commented 8 years ago

I was having the same problem as @Nielsticot, but also noticed another issue. I do have a CSS file being referenced, but it's in a directory called css/. The fonts I load are then trying to be loaded from css/fonts/, which is not where my fonts folder is. To get around this, I tried using the paths setting for fonts in my setup, but that didn't work.

rezoner commented 8 years ago

Pushed new version. Instead of using document.styleSheets I now simply create an empty <style> element and use it for loading fonts. That should resolve both of your problems. I would be thankful for a test.

jackrugile commented 8 years ago

Fix confirmed for me. Thanks!