How to Download and Use Great Free Fonts
in Your Headlines and Web Graphics
Did you know that your computer has a font folder with a bunch of different fonts inside that allow you to both use and view fonts in emails or online? True story.
If you have a cool font on your computer and you use it in your emails or in an online text editor, other people cannot see that font unless they have the same font downloaded to their computer, in their font file, too.
In order to have your headings and stuff show up in a cool font, you need to create an IMAGE of your heading. So, instead of just typing it out, you actually create a sort of button in a program like Photoshop, The Gimp or Paint, the Windows accessories program.
You may have noticed that some of my page title headings show up in a cool handwritten font and others are in Verdana (I think). The cool ones are actual images I made and uploaded to my site, just like photographs, and imbedded into the page.
Before I tell you how to make buttons and stuff with your cool free fonts, I'm going to explain
How to download free fonts to your computer:
I have had a difficult time finding good free font websites. Nearly every site is packed with text and buttons here and there and blinky things and it's an overwhelming jumbly mess. And a waste of my life, trying to find what I want.
But last night I stumbled upon UrbanFonts.com. It ROCKS! Clean, easy to navigate, and with a fantastic selection (I've noted some of my faves at the bottom of this page.) of free fonts in well-organized categories with titles like Sophisticated, Retro, Old Fashioned, Funky and (my fave) Handwritten. (The categories can also help clue you in as to whether a font is good for your business logo or not: if you operate a yoga service business, you really shouldn't be looking in the category of "Old Fashioned".)
The website has fonts for both Windows and Mac users. Once you find a font you like, you'll see that the bottom right hand corner of the font sample, it says WIN/MAC.
I'm going to give instructions to Windows users. I know nothing about Mac but will try to update it soon for my Mac-using friends.
1. Click on "WIN".
2. A box will pop up saying File Download at the top and it will ask if you if you want to save it or open it. Click "Save".
3. It will ask you where you want to save it. Select your Desktop because it's easy to find. (Your Desktop is the screen with all the program icons that show up when you turn on your computer.) Click "Save".
4. A box will pop up saying Download Complete at the top. Click "Open".
5. You will see a white screen with one little icon or a few, depending on the font. To the left under "Folder tasks", you'll see a little paper folder icon with a zipper on it and the words "Extract all files". This paper folder with the zipper is called a compressed file. When you download things from the Internet they usually come in this compressed format because it's faster to download. I don't know how or why because I don't care, but it is faster. Click on "Extract all files".
6. You should have within your computer a built-in "wizard" tool that will extract the information from this compressed ("zipped") file. Click "Next".
7. You'll see a code that looks something like this: C:\Documents and Settings\Admin\Desktop\alias . Make sure that it says "Desktop" before the name of the free font. If it doesn't, click the "Browse" button and look for the Desktop option. Click it. Then, click "Next".
8. In the next window that appears, make sure that you have checked the little box to "Show extracted files" and then click "Finish".
9. Now you will see one or more icons. Look for the one that looks like this:
Instead of "Alias", it will say the name of the font you downloaded. (I couldn't resist downloading the font of one of the best television shows ever, even though I have no use for the font.)
10. Now, you need to find your Fonts folder. Leave the Font folder screen the way it is. Don't close it off by clicking the red X or anything. Click on the "Start" button in the bottom left hand corner of your screen.
11. Click on "Control Panel".
12. At the top, click "View". Then, click on "Icons".
13. Look for a picture of a file with maybe a green letter A stuck inside. It should say "Fonts".
14. Find the button at the bottom of your screen that has the font name in it. Click on it to open it up. Find the icon that looks similar to the one I showed in direct #9. Click on it and don't let go of the click. Hold your finger down and move the mouse so that you're dragging and moving the icon. Drag in over to the button at the bottom that says "Fonts" and wait until the screen opens up. Then, let go of your finger. You have just dragged and dropped the font file into your font folder.
How to use fonts in web graphics:
You'd be surprised what you can do with Paint, the program that comes free with Windows. I know graphic and web designers would choke on their own tongue to hear me say that Paint can make some basic headlines and graphics for you, but I'm sayin' it anyway.
As long as the background of the button or headline can be white, Paint can do some basic things. The downside of using Paint is that files only look good as Bitmaps (bmp). Once you save it to a more web friendly format like Jpeg or Gif, it gets this awful grainy look all around your image. You can deal with this by downloading some inexpensive programs that convert files to jpegs, and keep them looking clean without the grainy stuff.
But really, I recommend The Gimp. (Instructions on how to download it are at the bottom of the page.) People say that The Gimp is a very easy alternative to Photoshop. You'd only think it's easy if you know how to use Photoshop. Photoshop is a maze. It's the kind of program that requires a manual to learn. I like things that only require common sense. Gimp is kind of in between.
Gimp can make all your web graphics, if you figure it out. But if all you want to do is create simple headlines and buttons, you can use Paint, then Gimp.
Let's say you have a white web page. You just want a headline. All you do is
1. Click on "Start", then "All Programs", then "Accessories", then "Paint".
2. You can make the white box there bigger by finding the faint grey square in the middle of the bottom and right hand edges, clicking on them and dragging them out. Then, click on the big letter A. If a text toolbar with fonts from which to choose does not pop up, click on View, then Text toolbar. After you type some text, you can click on different fonts and it will change your text to those fonts and you can see how they look.
3. You can change the colour of the font by clicking on "Colours", "Edit Colours" and then "Define Colours".
4. The only way to center your text is to reposition it manually after it's been typed onto the page. To do this, you click on the dotted rectangle, then click on the upper left corner around your text, and drag a rectangle around your item. You can then move it around.
5. If you make a mistake, click "Edit", then "Undo". You can only undo 3 times. Any work you did prior to three moves is permanent.
6. Once you've got your piece of text the way you want it, save it as a Bmp file in My Pictures.
7. Open Gimp. Click on "File" at the top, then "Open". Open My Pictures and find your file. You can just type the first few letters of the title of your file and it will pull it up for you.
8. Click "Image", then "Flatten Image."
9. Click "File", then "Save As". Name your picture something with good keywords in it (words which people will likely use to search for whatever is on your webpage). Click on "Select file type" and scroll down until you find JPEG image. Click on it and then "Save".
If you want to make a solid background with text over top, here's a beginner method:
1. Open Paint, as per directions above. Select a colour. Click on a shape (Paint does round corner squares but not very well.) without an outline. Click your mouse, drag it to create a shape at the desired size. Save it.
2. Open Gimp. Click File, then Open, then your image. Click on the button with the big letter T.
3. Click on the button beside the word Font, in the menu that appears at the bottom. Select a font. (To get all your new fonts to show up in Gimp's menu, click the bendy arrow button in the bottom right hand corner.) You can select a colour, size and how you want the text to align (to the left, right, centered or justified-- meaning all straight edges. If you find the lines of text are too close together, you can select the amount of space with "Line spacing". Make sure to click "Hinting". It's a good thing.
4. Click on your image. A white box will appear. You will type in there and the text will appear on your image.
5. The box will probably not be aligned on your image. To get your font to go just where you want it, click on "Select", in the box that contains your image, and then "All". Then use your arrow buttons on your keyboard to move the text box around.
6. If you don't like the spacing between the lines (like you set it at 0.0 but it's still too wide) you will have to create multiple layers. Just like you are layering text on top of your graphic, you can create another layer without it affecting the first two. First make sure that your first layer of text is where you want it. Then, click on "Layer", then "New Layer", ignore the size and make sure that "Transparency" is selected. Type your text in the white pop-up box then close it. You should be able to move the text around with the arrows on your keyboard. Make as many layers as you need.
7. If you are done, click "Image" then "Flatten Image". It puts all the layers together into one. Now you can save it. Click File, then Save As. Name your picture something with good keywords in it (words which people will likely use to search for whatever is on your webpage). Click on "Select file type" and scroll down until you find JPEG image. Click on it and then "Save".
How to download The Gimp for Windows users:
It's not easy to figure out how to download this program. There's links all over the place and weird techie language. I had a computer expert download it for me when my efforts didn't work out and it took him a while. I don't understand why.
http://gimp-win.sourceforge.net/stable.html Go there first. You'll see that you need to download The Gimp AND a GTK+ 2 Runtime Environment, whatever that means.
You have to install the GTK first before you install Gimp. It will give you this error message if you do it the other way around. Also, I think we had to install the 2nd one, even though it sounded like I should have downloaded the first one, with Windows XP. Why can't the website just say, "Download this one if you have Windows XP"?
Some favourite fonts from UrbanFonts.com which you can search for on the site:
Cursif
Dominican
Dr. Eve L
Eminenz
Caeldera
Il Shake Felt
Renaiss
Mordred
