Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The nub of the problem is that you are trying to use the font but the browser has not loaded it yet and possibly has not even requested it. What you need is something that will load the font and give you a callback once it is loaded; once you get the callback, you know it is okay to use the font.</p> <p>Look at Google's <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html" rel="noreferrer">WebFont Loader</a>; it seems like a "custom" provider and an <code>active</code> callback after the load would make it work.</p> <p>I've never used it before, but from a quick scan of the docs you need to make a css file <code>fonts/pressstart2p.css</code>, like this:</p> <pre><code>@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: normal; src: local('Press Start 2P'), url('http://lemon-factory.net/reproduce/fonts/Press Start 2P.ttf') format('ttf'); } </code></pre> <p>Then add the following JS:</p> <pre><code> WebFontConfig = { custom: { families: ['Press Start 2P'], urls: [ 'http://lemon-factory.net/reproduce/fonts/pressstart2p.css']}, active: function() { /* code to execute once all font families are loaded */ console.log(" I sure hope my font is loaded now. "); } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload