Sometimes I wonder if I went to the right college. Don't get me wrong, I'm enjoying my time here, but I think it's always good to question yourself a little now and then to not get complacent/too comfortable. I have say I love my school now...after discovering that they got a campus license to Lynda. HOW FREAKING AWESOME IS THAT?! After discovering Lynda through Katrina I've always been dying to learn HTML/CSS and everything else properly since everything you see here is self-taught from Xanga days (oh how far I have come).
In honour of my blogniversary I've decided to share a few tips of the trade I've learnt through the past two years of blogging. I know there are some VERY good sites that are already offering such coding tricks (like Katrina's Pugly Pixel) but I want to share things that are so basic you'd be hard pressed to find them easily. I learnt the hard way by digging through a lot of sites before I found the stuff I'm going to share with you guys.
The first blog secret of the day is: installing Google Web Font on Blogger. I'm amazed that not too many people have heard of Google Web Fonts, considering it's one of the best font resources out there that's completely FREE. This is one of the best initiatives I've seen from Google and is a great alternative to other font services like TypeKit, which adds an ugly grey flag on your site if you're on the 'free plan'. In case you were wondering both the fonts installed here on this blog are from Google Web Font.
Installing the Google Web Font is a cinch except for one small thing...a slash (/). Follow the quick use instructions as written. First you will get should get something like this (I am using Roboto as an example here, so the code they ask you to insert in step 3 will be different according to the font you chose):
<head><link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<head><link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
Finish by following step 4 as written and voila! You're done. See why barely any sites mention this - it's because it's that easy.
Extra tips:
- if the body fonts looks a little weird when you use it in italics or bold, it's probably because you didn't select it when choosing the styles. Select the styles that you would use, even if it does end up slowing down the loading time of your site a bit.
- Using 'Gentium Basic' my own body font as an example, the font won't show up kinda funky looking if you choose not only Normal 400, but also Normal 400 italic, Bold 700 and Bold 700 Italic if you want to have the full range of using italics, bold and both together.
- if the font looks what I call "muddy", not too clean or precise as you see it on Google Web Fonts, it's probably because you forgot to add the font-weight in the CSS:
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;By now, everything should look fine.
Hope that made sense and worked for all you! This was written for people without much knowledge of HMTL/CSS and yet still want to tweak around with their fonts, so seasoned pros go right ahead. Let me know if you have further questions and show off your handiwork in the comments below!
