In May Google Announced that they will be offering their Google Fonts API to the public. What is the Google Fonts API? Basically since the web was developed web designers in order to show off fancy custom fonts would have to create them as part of an image and then display the image using HTML. This is going to be changing very soon, well in fact with the Google Fonts API it already has.

The Google Fonts API allows you to use CSS coding to display custom fonts using font-face CSS rather than displaying it using HTML. Here is an example!
This is not an image. Go ahead highlight and copy and paste the text to a text document to see. As you can see, with Google Fonts API, you now display some great fonts without using images. If the "MySpace Compilation!" text above looks plain and not "fancy", it means you don't have a modern web browser to display it. Click here to view an image of the font to see how it looks. Taken from the Google Font API FAQs: What browsers are supported?

The Google Font API is compatible with the following browsers:

* Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Opera: version 10.5+
* Microsoft Internet Explorer: version 6+

If you have an older browser version it's probably a good idea to update it anyways. Then come back and view this page again to see how the font looks.

Now for the reason you came here. How can I apply Google Fonts API to MySpace? Well Google recommends using an external stylesheet, like this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

The problem with MySpace is they do not allow linking to external stylesheets. So the work around will be to copy the URL above for the CSS file and paste to your address bar in your browser. Here is the URL above taken from the code:

http://fonts.googleapis.com/css?family=Tangerine

If you paste that to your browser address bar it should now display the CSS codes saved in that file, like this

@font-face { font-family: 'Tangerine'; font-style: normal; font-weight: normal; src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA') format('truetype'); }

Take this code and copy and paste it to your MySpace 2.0 CSS Box { }. Make sure to paste it at the very top so the browser can load the fonts first. Now that you have that done, you need to target specific selectors within your MySpace page to get it to work. For example, if you want all your headers to be in this Tangerine font style, you could add this to the CSS code:

h3.moduleHead span {font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa;}

So the final code will look like this:

@font-face { font-family: 'Tangerine'; font-style: normal; font-weight: normal; src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA') format('truetype'); } h3.moduleHead span {font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa;}

Publish your changes and your done. Your headers should look something like this now:



There are several new free fonts that Google released to use. You can get to them by going to the Google Font Directory. The problem right now is this is so new and not fully adopted that the free fonts directory is limited to just a few selections. As time goes on and this becomes more popular Google will add more free fonts to use. And you probably can guess, I keep saying free because Google partnered with TypeKit on this project who offers many many more fonts for a fee of course.

So why use this? You can expand your current web fonts to make your web pages and MySpace profiles look a lot better more easily. And as time passes more and more fonts will be added. Make sure to check out the Google Font APIs page for additional specs, coding and FAQs. There is actually quite a lot you can do with this and do it right on MySpace.