CODEWITHSUNDEEP
jqueryhtml
yaakov
yaakov

Reputation: 4645

link not being changed

I am trying to make a Google Fonts font display type of thing, where a user types a font name and display text and the text is displayed in the font he chose.
JS:

  $("#font, #display-text").keyup(function () {
      var fontFamily = $(this).val();
      var font = fontFamily.split(' ').join('+');
      var prefix = "//fonts.googleapis.com/css?family=";
      var fontName = prefix + font;
      var displayText = $("#display-text").val();
      $("#font-link").attr('href', fontName);
      $("#display").text(displayText).css('font-family', "'" + fontName + "'");

  });

HTML:

<div>
    <table>
        <tr>
            <td>Type the name of the font (in full):</td>
            <td>
                <input type="text" name="font" id="font" />
            </td>
        </tr>
        <tr>
            <td>Type your display text:</td>
            <td>
                <input type="text" id="display-text" />
            </td>
        </tr>
    </table>
</div>
<div id="display"></div>
<link id="font-link" rel="stylesheet" href="">

I know the font is received from the fonts.googleapis.com, but it is not displaying correctly.
FIDDLE

Upvotes: 0

Views: 22

Answers (1)

rampant disaster
rampant disaster

Reputation: 36

The variable fontName is the prefix and the font. So if someone inputs Slabo 27px the font-family put in the css is: fonts.googleapis.com/css?family=Slabo+27px, not Slabo 27px. Instead, give the css this:

 $("#font, #display-text").keyup(function () {
      var fontFamily = $(this).val();
      var font = fontFamily.split(' ').join('+');
      var prefix = "//fonts.googleapis.com/css?family=";
      var fontName = prefix + font;
      var displayText = $("#display-text").val();
      $("#font-link").attr('href', fontName);
      $("#display").text(displayText).css('font-family', "'" + fontFamily + "'");

  });

Notice the fontName in the .css is changed to fontFamily.

Upvotes: 2

Related Questions