All of these fonts are FREE!
- Belta Regular
- GE Signature
- Bebas Neue
- Housegrind
- KG One More Night
- Grand Hotel
- Lotta Paperfang
- Recorda Script
- Salt & Foam
- Southern Aire
Enjoy.
Nerd DIY // Some Really Great Fonts
February 21, 2013 By
Nerd DIY // The Best Google Web Fonts
August 24, 2012 By
There are 500+ web fonts available on Google Web Fonts. And, even with their filters it’s an overwhelming experience to browse through all of their fonts – not to mention when you view one of them and you click to go back to the list, you’re screwed because you have to start at the beginning. With that being said, though, it’s a great resource for fonts.
I found a cool site the other day called Best Google Web Fonts and they have a short list of (in their opinion) the best fonts. I’m not going to lie, their list is pretty good, really pretty good. And, they have all of the code right on their webpage that you’ll need to add the fonts to your site.
For Blogger, add the STANDARD code immediately after the <head> tag in your HTML file, and don’t forget to insert a closing tag at the end of it! Those Google folks conveniently left that little bit out.
For WordPress.org, add the IMPORT code in your style.css file.
Then, add your font css / font-family where ever you’d like the font to appear. For example to have your widget titles show the new font:
Save & visit your blog to see the changes. You should see your new font lookin’ all spectacular & stuff!
Nerd DIY // Handwritten Free Fonts
June 27, 2012 By
Mixtape Mike, Serial Sue, Just Skinny, Sweetly Broken, Amatic SC, CK Ali’s Hand, Garden, Jane Austen, Indie Star BB, Hyrule
I love using fonts that look like you scratched them out on a piece a paper. I just found Mixtape Mike today and I have a feeling that font author is (quite successfully) going to capitalize on the Magic Mike frenzy that’ll be hitting us at the end of this week.
(Are you going to see Magic Mike on Friday?)
Nerd DIY // How to add Google web fonts to your Blogger blog
February 11, 2012 By
In four easy steps!
- 1. Pick your font.
Go to Google Web Fonts and add the font you like to your collection.
In this example we’re going to pick Fredericka the Great font. After you added it to your font family collection you’ll click on the button “Use”.
- 2. Get the code.
Now we’ll need to 2 sets of code to add to our Blogger blog’s HTML & CSS.
- 3. Embed the font family.
Copy the first box of code and paste it after the <head> section in your HTML. See below, right after the <head> section I pasted the new font family code.
And here’s the part that’s not documented on Google Web Fonts site, that I’m going to tell you because I don’t want to you go crazy like I did… you must insert a “/” backwards slash at the end of the code. The code you copy from their site will not have the “/” you need to add that yourself right after the type=’text/css’ before the ending “>”.
- 4. Integrate the fonts into your blog.
Copy the code in the second box and place it in your template where ever you want the new font to be.
Let’s say you wanted to change the font of the post titles. Search your HTML for the code that defines your post titles, it may look something like this:
.post h3 {
font-family: ‘Fredericka the Great’, cursive;
…
}
If you want to add it to the sidebar titles, too, look for that code:
h2 {
font-family: ‘Fredericka the Great’, cursive;
…
}
Replace the code for the original font-family with your new font-family.
If you want to change the size, color & weight (bold, not bold) you may also add these to the same section.
h2 {
font-family: ‘Fredericka the Great’, cursive;
font-size: 21px;
color: #333737;
font-weight:normal;
}
{Title fonts can be coded <h1> to <h6>, these tags are used to define HTML headings and can be different depending on which Blogger template you are using. Look around in your code, you’ll usually be able to tell which is which by the grouping/heading they are under. When in doubt change a setting and use preview to check it – if it isn’t right go back to your code, click clear edits and try again.}
- Examples
In the blog below we changed the Post Titles and the Sidebar Titles to Fredericka the Great font.
In the blog below we changed the Post Title & Sidebar Title font to IM Fell French Canon SC in grey & red velvet, and we used Parisienne font in gold in an HTML widget to define the blog’s links in the upper left sidebar.
The HTML widget code will look something like this – with a span code to determine the font used:
<span style=”line-height:110%;font-family:Parisienne;font-size:37px;”>
<a href=”URL”>Home</a><br />
<a href=”URL”>About</a><br />
<a href=”URL”>Website</a><br />
<a href=”URL”>We believe</a><br />
<a href=”URL”>Fashion</a><br />
<a href=”URL”>Sponsor</a><br />
<a href=”mailto:EMAIL ADDRESS”>Contact</a>
</span>
In the blog below we changed the Post Title & Sidebar Title fonts to Rouge Script, and gave each it’s own color (grey & pink.)
Enjoy.
{For WordPress blogs, including my own, I use a plug-in called AnyFont.}
31 Days of Blog Design Tips & Tricks : day 20
October 20, 2011 By
Day 20
FREE
Where to find free fonts
There are lots of resources for free fonts out there on the Internet. Here are a few of the sites that I use for my personal blog as well as for my blog design site:
Not sure how to install font on your computer? Here are some instructions for Mac and Windows.
Speaking of free font, I used a gaggle of fonts for a recent Sweet Faerie business card design, Keisha at Captured Footprints hired me last week to design a new batch of cards for her – based on her inspiration and needs this is what we came up with:
Fonts in order of use:
Rockwell
Also loving this 31 dayer:
31 Days inspired by Nesting Place
Blog Design by Sweet Faerie Designs
