Font Preview Using CSS3
Not too long ago, I thought if I wanted to make a web site that allowed users to enter text and then see that text in various fonts, fonts that may not exist on their local computer, that I would need to embed a Flash application which in turn had the available fonts embedded in it. Today, thanks largely to http://sixrevisions.com/css/font-face-guide/, I know I can accomplish the task, at least for most browsers, using CSS and @font-face.
The first thing you will need is a page with the following features: (1) some way for the user to provide the text they want to preview, (2) some way for the user to choose the font they want to preview, and (3) some way to display the provided text using the chosen font. My page contained something similar to:
<div id="preview_container">
<div id='preview_txt'>Sample preview text</div>
</div>
<div>
Text to preview:
<input id="preview_text_input" type="text" value=""
onchange="changePreviewText('preview_text_input', 'preview_txt')" /> </div>
<div>
Font Choice<br/>
<div>
<input id="radio_font1" name="font-selector"
onclick="changePreviewFont('preview_container', 'Font1')"
type="radio" value="Font1" />
Font1
</div>
<div>
<input id="radio_font2" name="font-selector"
onclick="changePreviewFont('preview_container', 'Font2')"
type="radio" value="Font2" />
Font2
</div>
</div>
Notice that the input, with id=preview_text_input, makes use of a javascript function that changes the "inner text" of the div, with id=preview_txt, whenever the value of the input changes. I will not discuss that javascript function further here. Also notice that the two radio buttons make use of javascript function when clicked. That function looks like this:
function changePreviewFont(preview_div_id, font_name) {
var preview_div = document.getElementById(preview_div_id);
preview_div.style.fontFamily = font_name;
}
All the function does is set the font-family style for the div with id=preview_container. Specifically we set the style to either "Font1" or "Font2" depending on which radio button was clicked. And so, we have arrived at the crux of this little foray. How do we define "Font1" and "Font2." We do it with the following CSS code:
@font-face
{
font-family: Font1;
src: url('<your first eot font filename>.eot');
src: local(' '), url('<your first ttf font filename>.ttf') format('truetype');
}
@font-face
{
font-family: Font2;
src: url('<your second eot font filename>.eot');
src: local(' '), url('<your second ttf font filename>.ttf') format('truetype');
}
Of course, you will need to replace the "<>" variables with the appropriate filenames. So, obviously, the font-family element of the @font-face block defines the names we will use in setting the font-family style of the preview text div. The src elements tell CSS where to find the actual font files to use. In this case I am expecting that the font files reside in the same directory as the HTML/CSS file(s) and so I simply give the appropriate filename; however, the font files may even reside on a remote web server in which case I would access them by specifying the full URL to that font file. Furthermore, I have only accomodated Firefox and Internet Explorer and so only have two src elements. The first accomodates Internet Explorer as IE's implementation of @font-face requires font files in EOT format. The second line does two things. First, by including, "local(' ')," it ensures that the browser will not find a suitable local font file to use. Second, it accomodates Firefox by providing the location of a font file in TTF (truetype) format.
Well, that is, almost, it. The question remains where do you get the font files? I am not sure I have a great answer for you, but I will, at least, tell you what I did for the project for which I needed @font-face. First, you need to recognize that there are all sorts of sticky licensing issues surrounding the use of fonts. So be careful. In my case, I left it to the customer to ensure that they had the fonts they wanted to use properly licensed for their purposes. My customer then provided me with the TTF font files and I used the @font-face generator on font-squirrel.com to generate the EOT files I needed (along with various other formats that are needed to support other browsers). My customer provided me with one TTF file that, while it worked as a TTF, font-squirrel.com was unable to generate a @font-face package for it. I am still not sure what the impediment was. The URL for the font-squirrel @font-face generator is http://www.fontsquirrel.com/fontface/generator.
One final comment, because the browser will need to download the font files and load them for use, you may see some delay the first time you try to use a font. On my project I used the font to label the radio buttons to ensure that each font was ready for previewing when the user selected it.
Subscribe to feed