HTML input text field custom font

Question

I have try this code to set custom TTF font in teh input text filed:

        <style type="text/css">
            @font-face {
                font-family: "JdLcd";
                src: url("jd_lcd_rounded.ttf");
                //src: url("jd_lcd_rounded.ttf") format('truetype');
            }

            input[name='email'] {
                font-family: "JdLcd";
            }
        </style>

Font is changed, but it's not the same like in TTF file. What is wrong?

Answer 1

Are you sure the font is in the root of your webserver?

You'd have to upload the proper font files to the server and then call them in your CSS, otherwise your browser will try to find this font on your current system and if it can't find either, it will fall back to the default font.

A good place to start is the Font Squirrel generator: http://www.fontsquirrel.com/tools/webfont-generator

Answer 2

You need to convert your TTF fonts to web fonts. You can use a service like Font Squirrel to do this.

http://www.fontsquirrel.com/tools/webfont-generator