Hi everyone!
I've been watching Google Web Fonts for a while and it struck me as an amazing tool to help Epics and Theme Builders to create more amazing profile layouts.
How do fonts currently work?
In order to see the font that's used in the CSS (i.e.: font-family:tahoma; ), the person viewing the site needs to have the font already installed on their system. XP users and Vista/7 users have often different fonts. Vista and 7 come preinstalled with more fancy fonts than XP users.
If a visitor of the site does not have the font TAHOMA installed on their computer, they will only see a boring, plain ugly font.
How is this important for layouts?
Right now, we define altnerative fonts in our templates. We basically tell the CSS (in example) "If the visitor doesn't have TAHOMA installed, use the font COMIC SANS MS".
In effect this means that two people who view the same site, may see the text in an entirely different font. That means some users will not be able to enjoy the theme you created or altered to the full extent, making your efforts go partially to waste.
So what is Google Web Font?
It's genius. Formerly, it was possible to convert a font file (the file that makes your text look fancy) to a special file, upload it to your site and everyone who saw your site, would use the font file you uploaded to your server to see the right font. This however is a tedious job (the programs that do this are often primitive, bulky and not so nice to work with) and requires extra space on your server to make it happen. All to make your text look prettier in the case someone doesn't have the font.
Google Web Font makes this all moot. With a simple little line of coding, Google Web Font will do all the hard work for you. You insert a special line of code with your desired font (which needs to be available on GWF). Whenever a visitor sees your site, the font is taken from Google's database and used to display the right font in the layout.
Check out Google Web Fonts here
All the fonts you see listed on that page? I'm betting you never installed those fonts. And those aren't images! Oh no.
That is all regular text! Because of Google's Web Font technology, you can see -any- font stored in Google Web Fonts without having to install it. And this, my friends, allows unlimited possibilities of playing with the text in your layouts.
You can customize the fonts to whatever you want, without having to worry about whether other people will see it just the way you see it. With Epic Members having the option to make their own templates, this is an extraordinary tool.
So how do we use this?
Right now, not at all. Google Web Fonts requires a special bit of coding we can't insert into our templates right now. (Specifically the link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=INSERTHERE" bit, which is a piece of HTML coding that should be outside of the CSS area that we edit.)
How to use Google Web Fonts?
To Kim: Perhaps it would be an idea to make an extra field in the CSS Editor where we add the tags that come after "css?family=" - these are the tags that define the fonts. You can standard insert the GWF link rel line into the headers of every page, and if someone puts the fonts in the designated text field, it's automatically added at the end of the link rel URL. Then users can define the font in the CSS markup to make the fonts they chose have effect.
I'm not sure how you setup the pages/CSS editor, but in theory it should be relatively simple to add.
Thoughts? Ideas? Protests? Questions? I'd love to hear them!
I've been watching Google Web Fonts for a while and it struck me as an amazing tool to help Epics and Theme Builders to create more amazing profile layouts.
How do fonts currently work?
In order to see the font that's used in the CSS (i.e.: font-family:tahoma; ), the person viewing the site needs to have the font already installed on their system. XP users and Vista/7 users have often different fonts. Vista and 7 come preinstalled with more fancy fonts than XP users.
If a visitor of the site does not have the font TAHOMA installed on their computer, they will only see a boring, plain ugly font.
How is this important for layouts?
Right now, we define altnerative fonts in our templates. We basically tell the CSS (in example) "If the visitor doesn't have TAHOMA installed, use the font COMIC SANS MS".
In effect this means that two people who view the same site, may see the text in an entirely different font. That means some users will not be able to enjoy the theme you created or altered to the full extent, making your efforts go partially to waste.
So what is Google Web Font?
It's genius. Formerly, it was possible to convert a font file (the file that makes your text look fancy) to a special file, upload it to your site and everyone who saw your site, would use the font file you uploaded to your server to see the right font. This however is a tedious job (the programs that do this are often primitive, bulky and not so nice to work with) and requires extra space on your server to make it happen. All to make your text look prettier in the case someone doesn't have the font.
Google Web Font makes this all moot. With a simple little line of coding, Google Web Font will do all the hard work for you. You insert a special line of code with your desired font (which needs to be available on GWF). Whenever a visitor sees your site, the font is taken from Google's database and used to display the right font in the layout.
Check out Google Web Fonts here
All the fonts you see listed on that page? I'm betting you never installed those fonts. And those aren't images! Oh no.
That is all regular text! Because of Google's Web Font technology, you can see -any- font stored in Google Web Fonts without having to install it. And this, my friends, allows unlimited possibilities of playing with the text in your layouts.You can customize the fonts to whatever you want, without having to worry about whether other people will see it just the way you see it. With Epic Members having the option to make their own templates, this is an extraordinary tool.
So how do we use this?
Right now, not at all.
Google Web Fonts requires a special bit of coding we can't insert into our templates right now. (Specifically the link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=INSERTHERE" bit, which is a piece of HTML coding that should be outside of the CSS area that we edit.)How to use Google Web Fonts?
To Kim: Perhaps it would be an idea to make an extra field in the CSS Editor where we add the tags that come after "css?family=" - these are the tags that define the fonts. You can standard insert the GWF link rel line into the headers of every page, and if someone puts the fonts in the designated text field, it's automatically added at the end of the link rel URL. Then users can define the font in the CSS markup to make the fonts they chose have effect.
I'm not sure how you setup the pages/CSS editor, but in theory it should be relatively simple to add.
Thoughts? Ideas? Protests? Questions? I'd love to hear them!
To further explain, I had a peek at Smile's CSS code. The template uses fonts like this:
segoe script
segoe print
trajan pro
optima
And others. People who don't have these fonts will not see the site the way it's intended, as seen below. Google Web Font will allow everyone to see the site the way it's intended.
segoe script
segoe print
trajan pro
optima
And others. People who don't have these fonts will not see the site the way it's intended, as seen below. Google Web Font will allow everyone to see the site the way it's intended.
I didn't know Google did that, very impressive.
Might have to use it for my own sites, so thankyou
Might have to use it for my own sites, so thankyou
You're very welcome! I hope it'll be useful to you.
I hope it'll be useful to you.
I remember you messaging me about this in the past, but then it got snowed out of my brain under a storm of other features. Thank you so much for reminding me, I will definitely see what I can do about supporting this.
I've been using Google's font API for a while, and I ust say it's a wonderful tool. Thank you for posting this for others. 
Kim wrote:
I remember you messaging me about this in the past, but then it got snowed out of my brain under a storm of other features. Thank you so much for reminding me, I will definitely see what I can do about supporting this.
I figured as much!
You've been incredibly busy with things so I thought it was a good idea to at least share this and give people a chance to familiarize themselves with it. ^^I'll look forward to possible future implementations!!
You are on: Forums » Suggestions & Development Discussion » Google Web Fonts for custom CSS layouts
Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus