Cannot get FlowType.js to work

Question

I've inserted the following right before the </body> tag and the type isn't changing at all. I can't figure out what I'm doing wrong.

https://github.com/simplefocus/FlowType.JS

http://jsfiddle.net/tawshmcd/gLJxE/

--

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  
<script src="https://raw.github.com/simplefocus/FlowType.JS/master/flowtype.js"></script>

<script>
    $('body').flowtype({
     minimum   : 500,
     maximum   : 1200,
     minFont   : 12,
     maxFont   : 40,
     fontRatio : 30,
     lineRatio : 1.45
    });
</script>

Answer 1

Short answer: Don't src from raw.github.com.

The problem is that you're sourcing the flowtype.js file from github raw. Github raw returns javascript as type plaintext (to discourage sourcing from github raw).

Since the file has the wrong mimetype, the webbrowser won't execute it as javascript.

To fix the problem you will need to find a proper host for the file. You can host it yourself via a local webserver, or find a free CDN account to put the file up.

Edit to add:

With your JS Fiddle, if you open the Javascript console, you'll see the following error:

Refused to execute script from 'https://raw.github.com/simplefocus/FlowType.JS/master/flowtype.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.