Tuesday, February 15, 2011

Tangerine Font Test

Two variants. Use font weight bold. Regular is too light. I could specify cursive then serif substitutes for this one? Test that. No, ugly, use serif.

Tangerine Google Font

Uppercase 60px Tangerine font weight bold:
ABCDEFGHIJKLM -Check line spacing- NOPQRSTUVWXYZ

Lowercase 60px Tangerine Bold, Line Height 1em:
abcdefghijklmnopqrstuvwxyz
Check line spacing for
bdfjklpq. This is a teensy font. Crowded letters too. Pretty though.


Letter spacing 0.05em, Line Height 1em:
Letter spacing. What does that do for this font? bdfjklpq

Misc 60px font weight bold:
&"{}?1234567890 Weird #'s.

Title 120 px:
Brief Insights

  To do is to be.
      To be is to do.
        Do be do be do be do...

Dancing Script Font Test

Dancing Script Google Font

Uppercase 30px Bold Line Height 1em:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Check line spacing.
ABCDEFGHIJKLMNOPQRSTUVWXYZ


Lowercase 30px Bold Line Height 1em:
abcdefghijklmnopqrstuvwxyz
Check line spacing.
abcdefghijklmnopqrstuvwxyz


Misc 30px Bold:
& " { }? ~ * 1234567890

Title 90 px:
Brief Insights

NOTE for Title: Italic doesn't work, em is ugly, Bold is ugly.

Monday, February 14, 2011

Google Fonts

I'm trying out the Google fonts.

To perceive freshly, with fresh senses is to be inspired.—Henry David Thoreau

There's so much inline code in that, it hardly seems worth the trouble.
I had to do a span for each smart quote and a span for the quote and a span for the author.
That's 4 spans each formatted with font size, color, then use Dancing Script for the font.

And THEN Blogger changes the code when I post it in my Sidebar!
So if I go in and Edit yet again, the code is wrong, and it won't display correctly.
Grrr...

Dancing Script isn't listed within the Template Designer?

It's a Google font, so I added the code per instructions here.
Add a slash at the end of the code, which isn't included in the code given at Google fonts.

I'm going to turn off fonts with Firefox NoScript and see what it looks like if the google fonts won't display for some reason. (Okay, substituted serif Georgia.)

Let's see if I can display the code:

Insert this code:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'/>
Right before:
</head>

Inline code:
<span style="color:#ffcc00;font-size:28px;">&#8220; </span>
<span style="color:#ffcc00;font-family:'Dancing Script',serif;font-size:28px;font-weight:bold;">To perceive freshly, with fresh senses is to be inspired.</span>
<span style="color:#ffcc00;font-size:28px;">&#8221;</span>
<span style="color:#ffcc00;font-family:'Dancing Script',serif;font-size:28px;font-weight:bold;">—Henry David Thoreau</span>


I added line breaks to make it easier to read. Tweaked the code too. Blogger creates rgb verbosity instead of the color#. It also strips out my smart quote codes. I think I had the emdash code (&#151;) there too at one time and Blogger striped that out also.

If I find a better way to inline code a quote with Google Fonts, I'll post it here.