'Souls IPB Archive (November 2007–October 2012)
Web fonts help! - Printable Version

+- 'Souls IPB Archive (November 2007–October 2012) (https://soulsrpg.com/ipb)
+-- Forum: Dead OOC (https://soulsrpg.com/ipb/forumdisplay.php?fid=100)
+--- Forum: Dead Questions & Help (https://soulsrpg.com/ipb/forumdisplay.php?fid=47)
+--- Thread: Web fonts help! (/showthread.php?tid=17779)

Pages: 1 2

- Sage River Lykoi - 05-17-2011

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 - 05-17-2011

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 - 05-17-2011

Omg, thanks so much Mel! Big Grin *squee*

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

- Sage River Lykoi - 05-24-2011

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 - 05-24-2011

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 - 05-24-2011

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 Big Grin

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

- Ezra Rosen - 05-24-2011

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

nvm >>

- Eris Eternity - 05-24-2011

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 - 05-24-2011

-whines-

i can't do this D:

i have

Quote: <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 - 05-24-2011

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 - 05-24-2011

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 - 05-24-2011

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

Quote:
RPGfix Tears, Bones & Desire: RPG Resources Vote 'Souls! Adopt an Open Character!
Eris Eternity
I will bury your god in my warm spit
Eris Eternity
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 - 05-24-2011

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

- Barrett - 05-24-2011

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 - 05-24-2011

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

- Barrett - 05-24-2011

[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 - 05-24-2011

[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 - 05-24-2011

ilu zero :3 <33333


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

- Barrett - 05-24-2011

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

And glad to help ^^

- Magnolia Takekuro - 05-24-2011

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