CODEWITHSUNDEEP
javascriptjquery
tttpapi
tttpapi

Reputation: 887

Including fonts using javascript prevents other javascripts

I am loading fonts with this piece of code.

<script type="text/javascript">
    (function () {
        var path = '//easy.myfonts.net/v2/js?sid=84112(font-family=John+Sans+Text)&sid=84097(font-family=John+Sans+Lite)&key=Ff0uyBryqy',
                  protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'),
                  trial = document.createElement('script');
        trial.type = 'text/javascript';
        trial.src = protocol + path;
        trial.async = true;
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(trial);
     })();
</script>

It loads the fonts but then my form javascript doesnt work.

Nette.addEvent(window, 'load', function () {
        for (var i = 0; i < document.forms.length; i++) {
                Nette.initForm(document.forms[i]);
        }
});

But when I put alert after head.appendChild it works just fine.

I tried to set async to false or remove it completely but the result is still the same.

There is a head snippet without fonts

<script></script>
<script src="/nette/www/js/modernizr.custom.js"></script>
<link media="screen, projection" href="/nette/www/css/settings-live-form-validation.css" rel="stylesheet">

And this is a head snippet including fonts:

  <script type="text/javascript" async="" src="http://easy.myfonts.net/v2/get?U4EE9fOUltFonWL1AupSkAm2&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cCo6Ly8qL3YyL2dldD9VNEVFOWZPVWx0Rm9uV0wxQXVwU2tBbTIiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzQ0NDU0NjB9fX1dfQ__&Signature=PM~gjifl7dOhJzXBzdSjLJhBZgxxBF9YmiNjwaS1xqJInBexm4qW2Fx1Vo-0p0S5gYxgGiFTIVzR57DDJCwHNYY39dY9mv8YlluqypJSXGU0dgP8WrIwg1N2SuN8ZcFhmmfVzdK2y9iOhUHs8~R93fXAZ~WNzTYnPcaVxOWs3SWLkCJfZjGSyptYs~94~d8d1LhJFKrvboswFdAIaLsFbw73Xd624rEHqGFhhwcQ-nx4J4zD2GgOyB4RpGukiaALP-SDY775uRVphvX8L0rp4Pp5PQEiuSMW3tMhjhG~qTuqhoAoe8sSQqEVau2eNgPeWtAeDSLdUbl4rKEwlNO4cg__&Key-Pair-Id=APKAJN6QFZEE4BZCL6XQ"></script>
    <script></script>
    <script src="/nette/www/js/modernizr.custom.js"></script>
    <link media="screen, projection" href="/nette/www/css/settings-live-form-validation.css" rel="stylesheet">
    <script type="text/javascript"></script> //fonts includer
    <script type="text/javascript" async="" src="http://easy.myfonts.net/v2/js?sid=84112(font-family=John+Sans+Text)&sid=84097(font-family=John+Sans+Lite)&key=Ff0uyBryqy"></script>
    <style type="text/css"></style>
    <link rel="stylesheet" type="text/css" href="http://cdn.myfonts.net/widgets/webfont_preview_bar/webfont_preview_bar.css">

Upvotes: 0

Views: 317

Answers (1)

rnevius
rnevius

Reputation: 27092

You need to close your script tags.

<script type="text/javascript" async="" src="http://easy.myfonts.net/v2/get?U4EE9fOUltFonWL1AupSkAm2&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cCo6Ly8qL3YyL2dldD9VNEVFOWZPVWx0Rm9uV0wxQXVwU2tBbTIiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzQ0NDU0NjB9fX1dfQ__&Signature=PM~gjifl7dOhJzXBzdSjLJhBZgxxBF9YmiNjwaS1xqJInBexm4qW2Fx1Vo-0p0S5gYxgGiFTIVzR57DDJCwHNYY39dY9mv8YlluqypJSXGU0dgP8WrIwg1N2SuN8ZcFhmmfVzdK2y9iOhUHs8~R93fXAZ~WNzTYnPcaVxOWs3SWLkCJfZjGSyptYs~94~d8d1LhJFKrvboswFdAIaLsFbw73Xd624rEHqGFhhwcQ-nx4J4zD2GgOyB4RpGukiaALP-SDY775uRVphvX8L0rp4Pp5PQEiuSMW3tMhjhG~qTuqhoAoe8sSQqEVau2eNgPeWtAeDSLdUbl4rKEwlNO4cg__&Key-Pair-Id=APKAJN6QFZEE4BZCL6XQ"></script>
<script src="/nette/www/js/modernizr.custom.js"></script>
<link media="screen, projection" href="/nette/www/css/settings-live-form-validation.css" rel="stylesheet">
<script type="text/javascript" async="" src="http://easy.myfonts.net/v2/js?sid=84112(font-family=John+Sans+Text)&sid=84097(font-family=John+Sans+Lite)&key=Ff0uyBryqy"></script>

You have a whole bunch of issues related to defining scripts with <script> but then not closing them with </script>.

Upvotes: 3

Related Questions