jquery .css() not working with font-size

Question

I know that there are a lot of other questions of this type, but none of them gave me my answer. This is throwing no errors, and I cannot see any bug or syntax errors.

I am trying to make a google fonts picker (kind of) using jquery:
js:

$("#submit").click(function () {
    var fontFamilyOrig = $("#font").val();
    var prefix = "//fonts.googleapis.com/css?family=";
    var fontFamily = fontFamilyOrig.split(' ').join('+');
    fontFamily = prefix + fontFamily;
    var fontSize = $("#font-size").val();
    var displayText = $("#display-text").val();
    var boldToggle = $("#bold");
    var itToggle = $("#italic");
    $("#font-link").attr('href', fontFamily);
    $("#display").css({
        'font-family': fontFamilyOrig,
        'font-size': fontSize
    }).text(displayText);
});

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>
        <tr>
            <td>Choose a font size:</td><td><input type="number" value="" id="font-size"></td></tr>
            <tr>
                <td>Other options:</td>
                <td>
                    <label><input type="checkbox" id="bold">Bold</label>
                    <label><input type="checkbox" id="italic">Italic</label>
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="Go" id="submit"></td>
            </tr>

       </table>
        </div>
        <div id="display">

        </div>
        <link id="font-link" rel="stylesheet" href="">

So what this does is display the text the user inputs in the user-specified font and font-size. But the font works, while the font-size does not. Why is only the font working, and not the font-size? FIDDLE

A. Wolff · Accepted Answer · 2015-07-20 18:22:24Z

4

Need to have px or em at the end of font size is my guess. Like you have to say

fontSize: fontSize + "px";

or

fontSize: fontSize + "em";

edited Jul 20, 2015 at 18:22

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

answered Jul 20, 2015 at 18:19

Bryan Mudge

4324 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tim Lewis Over a year ago

It's close, I'd add it like so: 'font-size': (fontSize + 'px')

yaakov Over a year ago

Thanks, can't give it the check yet.

yaakov Over a year ago

@TimLewis, i just made a variable with the value px and the syntax: .css('font-size', fontSize + otherVariable);

Tim Lewis Over a year ago

@yak613 Yup, that works and is a good idea if you don't plan on only using px (ie em, etc)

Collectives™ on Stack Overflow

jquery .css() not working with font-size

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related