Saturday, June 05, 2010

Test @font-face & inline CSS

Let us see if we will get a different font in the paragraph below:

This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme


Test successful as you can see the line of text above is using the Reenie Beanie font.

The test consist of first putting this code immediately after the <head> tag in the template. The above paragraph was displayed using this Inline CSS:

<p style="font-family:Reenie Beanie; font-size:140%;">This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme</p>

Since I cannot find "font-family" in the template itself, that set me thinking perhaps instead of font-family in the inline CSS, perhaps I can get away with just writing font:

Below I will test that:

This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme


The above was displayed using the following code:

<p style="font:Reenie Beanie; font-size:140%;">
This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme</p>

As you can see, the test is a failure. Just font:Reenie Beanie will not do. It has to be font-family:Reenie Beanie

No comments: