html5: Input Field Using @fontface, non-system fonts. Is this possible.

Question

Quick question, is it possible to have an input field in a form use a non-system font in html5 and css3? So if someone types in the form field the text could be something like gotham?

Answer 1

Yes, it is possible. I just had to remove the @font-face font from a site that I applied it on or else I'd link to a working example for you.

Here's what I had for the CSS though:

@font-face {
    font-family: 'QuicksandBook';
    src: url('/media/fonts/Quicksand_Book.eot');
    src: local('Quicksand Book'), local('QuicksandBook-Regular'), url('/media/fonts/Quicksand_Book.ttf') format('truetype');
}

html, body,
input, textarea {
    font-family: QuicksandBook, Arial, sans-serif;
}

Answer 2

Nothing special to do here, just setup a @font-face as normal:

@font-face {
   font-family: "Delicious";
   src: url("Delicious-Bold.otf"); 
}

.myinput {
   font-family: "Delicious";
}  

This works for me on Chrome for OSX