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.

No comments: