To the surprise (and amusement) of various people in my life, I've become a little bit interested in html code since I started my blog. Not a huge amount, just a little. :-) Enough to search the net and teach myself when I need to so that I can fix problems myself. I'm a big fan of trial and error, and I have a private practice blog where I can tweak codes before unleashing them on this blog.
There are so many fabulous tutorials out there showing how to achieve all sorts of things using html, but there was one issue I came across today that I couldn't find a solution for. I've figured it out (yay me!) and I thought I'd post it here on the off chance that it might help someone else. :-)
So. I've recently been playing around with changing the font on my blog, trying to get a uniform "look". I decided on using Arial as my default font for my blog posts (the body) and Covered By Your Grace for my post titles (headers) and tutorial titles, which is not a standard font in blogger. When I was making my Design Work and Challenge Recognition pages, I decided to find out an easy way to apply Covered By Your Grace to the entire page, thus saving me time and effort when it comes to updating the pages (rather than having to apply html code to every heading). I found it easy enough... here's the code if you're interested (replace Covered By Your Grace with your chosen font):
<style type="text/css">
<!--
BODY
{font-family: 'Covered By Your Grace'; font-size: large;
}
-->
</style>
You just add that to your page in the html editor at the very beginning, before any of the page content.
Of course, I decided to be extra clever and apply the same piece of code to the Challenge Recognition gadget on my sidebar... not so good. Why not? Because that manages to apply the code to your entire blog. So no more Arial font!
Because I've learnt from experience, I now only change one piece of html code at a time. That way, if it doesn't do what I expect, I know what piece of code is the problem. So I knew it was this code that was the problem, I just had to figure out that the problem was having it in a gadget.
Now, I'm not clever enough to know why that all works, I just have the code that works! So, if you're like me and you want to apply a different font to an entire gadget, you need this code (again, replace Covered By Your Grace with your chosen font):
<span style="font-family: 'Covered By Your Grace'; font-size: large;">
On the plus side, if you want to change the font for your entire blog, just add an html gadget to your side bar with this code (again, replace Covered By Your Grace with your chosen font):
<style type="text/css">
<!--
BODY
{font-family: 'Covered By Your Grace'; font-size: large;
}
-->
</style>
and hit save.
Ta-dah!!
No comments:
Post a Comment