Web fonts help!

[Sage River Lykoi]

I never knew that you could do this, but I notice some people have different fonts for their titles (like Sie's Sanctus Spiralis)... I'd like to get a new title for Sage and would like to use a different font for it. What are my options for fonts for this? I tried to look it up and sort of failed.

I found this page, but I'm not sure if this is what I'm looking for?

Thanks! <3

See last post!

[Ezekiel de le Poer]

You're actually seeing Google's Web Fonts in action!

http://www.google.com/webfonts

Those are web-safe fonts that can be used in titles, or in signatures like I've done with Zeke here.

[Sage River Lykoi]

Omg, thanks so much Mel! *squee*

Expect a PM soon about a title... >>

[Sage River Lykoi]

Okay, so, maybe I'm dumb but I can't figure out the webfonts. I'm not very good at CSS. How exactly do you put it into, say, your signature? D: *flails*

I copy the code it gives in the font previewer, but I know there is something else I need to add, I just don't know what. ; ; I seriously need to learn this stuff...

[Eris Eternity]

You just embed, for example:


at the end of the signature. Then, for the text itself:

Text here

Gives you:

[html]
Bobbi smells[/html]

Can also do CSS classes, of course:

Text here
<style>
.funkytext{font-family:'Podkova', arial, helvetica, sans-serif;}
</style>

[html]Text here
<style>
.funkytext{font-family:'Podkova', arial, helvetica, sans-serif;}
</style>[/html]

[Barrett]

You have to be sure to link the font style sheet/definition. On the google font page, go to the "Use this font" tab. You'll see something like

Code:

<link href='http://fonts.googleapis.com/css?family=Ruslan+Display' rel='stylesheet' type='text/css'>

that must be included to use the font. After you link it, you just use the font name in css like you would with any other

e -shakes fist at Sie!!!- D: ... xD <3

[Ezra Rosen]

[html]and you can do that for any font at all? o_o[/html]

nvm >>

[Eris Eternity]

No. Specifically, these fonts come from Google Web Fonts. You can technically upload a font file from your own computer and do it that way, but Google Fonts just makes your life ten times easier. XD

[Magnolia Takekuro]

-whines-

i can't do this D:

i have

<style>
body {
  font-family: 'Homemade Apple', serif;
  font-size: 33px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 2px 2px 2px #aaa;
  text-decoration: none;
  text-transform: none;
  letter-spacing: -0.008em;
  word-spacing: -0.035em;
  line-height: 1.2;
}
</style>

all set up and ready to go but IDKKKKK how to make it work on a signature. i made that on the google page. and how can you have two different fonts in one signature? -cries-

[Barrett]

Uh, well that would attempt to assign it for all text on the entire page/body/whatever. You should probably make it's own class.

<style>.shaesig{font-family: etc}</style>

then for the sig stuff

Here is my signature now:

Code:

<span style="font-family:'Reenie Beanie', trebuchet ms, san-serif;"><span style="font-size:30px;">the doctor says he's coming</span><br><span style="font-size:20px">but you gotta pay him ca$h</span></span><BR><BR><link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

So you don't even need to put it in a style sheet, really.

[Magnolia Takekuro]

ohhhhhhhhh XD see i know literally zero css (i should probably get on learning it, derp) so i didn't know that was required. :3

thanks! hopefully it'll work now. -scuttles away-

[Eris Eternity]

Here is my hefty-as-hell signature code, feel free to steal and modify if want. I bolded the important parts. ;D

	Eris Eternity I will bury your god in my warm spit
I drew my avatar! Commissions information here!

<style>.erissig{width:500px; margin:0px auto;}.erissig td{font-family:georgia, serif; text-align:center; padding:2px;}.erissig .name{font-size:30px; font-weight:bold; letter-spacing:-1px; word-spacing:4px; text-transform:uppercase; font-family: 'Rock Salt', arial, serif;}.erissig .tagline{font-size:10px; font-weight:normal; letter-spacing:-.5px; word-spacing:4px; text-transform:uppercase;}.erissig .linehgt{line-height:30px;}.erissig .extra{font-size:10px;font-family:arial, helvetica, sans-serif; text-transform:uppercase;}</style>

[Magnolia Takekuro]

8D <3 we'll see if i can figure this out!

[Barrett]

Right now you're just missing a " on the end of the font family and it looks like there's an extra space somewhere

Try this:

Code:

<span style="font-family:'Homemade+Apple'"><span style="font-size:35px;">Magnolia Monroe</span><br /><span style="font-size:20px">she can still hear that Rebel Yell just as loud as it was in 1983</span></span><BR><BR><link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>

[Magnolia Takekuro]

i still can't get it to work, gah. -dies-

[Barrett]

[html]Magnolia Monroe
she can still hear that Rebel Yell just as loud as it was in 1983

[/html]

Oh derp I get it now, sorry. Use this:

Code:

<span style="font-family:'Homemade Apple'"><span style="font-size:35px;">Magnolia Monroe</span><br /><span style="font-size:20px">she can still hear that Rebel Yell just as loud as it was in 1983</span></span><BR><BR><link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>

There isn't a + sign in the style part, only in the link XD;

[Eris Eternity]

[html]Magnolia Monroe
she can still hear that Rebel Yell
just as loud as it was in 1983

[/html]

Don't need the + between the font family when you call to it in the style itself, just when you're linking directly to the google fonts thinger. ^_^ In addition, you should degrade your fonts as gracefully as you can -- that way, if, for some reason, the user cannot display the font, it will still give you an alternative. I put in georgia and serif fonts for you after Homemade Apple, so that if Homemade Apple doesn't work, then it goes to Georgia, and if the user doesn't have that font, it displays in a standard serif font. There are probably better choices to degrade to, but eh. >_>

OMG ZERO SHADOWPOSTIN ALL DAY

[Magnolia Takekuro]

ilu zero :3 <33333


-edit- and sie too :3 <3 shadowpostin' twinz

[Barrett]

Bahaha. We're just that awesome, Sie. xD

And glad to help ^^

[Magnolia Takekuro]

ya'll should make a tutorial for derps like me. >>