Author Topic: Incorporating custom fonts and colours..... (Read 6276 times)

Aemirys · « **on:** December 30, 2011, 05:53:16 pm »

Hi....

I've finally gotten the chance to sit down and play around with the design and layout of my O/O pages and I was wanting to incorporate custom fonts and colours into my pages.

What I'm seeking help with and would like to find out is how I can go about using fonts other than those in the font face drop down box.

I also was curious about the same thing but for colours other than the standard ones in the drop down box.

Can anyone offer advice or guidance on this matter or perhaps place me on the path that will.....?

Thank you so much for your time.

Aemirys.

JackWhite · « **Reply #1 on:** December 30, 2011, 05:56:43 pm »

I don't think it is possible to get custom fonts on your page except for when you make your text in e.g. photoshop and put the url in your post.

jouzinka · « **Reply #2 on:** December 30, 2011, 06:02:41 pm »

Instead of words for color (red, green, orange...), you can use standard RGB code (000000 for black, 111111 for white)

Code: [Select]

[color=#fc4205]This text will be fierce orange[/color]
This text will be fierce orange

Edit (sorry, hit "Post" way too soon):

As far as typeface go, I'd be more careful - those in the dropdown menu are installed on the server (they're part of the SMF interface, I imagine), which means that if the computer of the viewer doesn't have the font installed on their computer, the server will provide it. If you choose a font outside of those and the computer of the viewer doesn't have it on their computer too, a different typeface will be supplied and the layout changed.

A part solution is to use fonts that are standardly installed in Win and Mac as there are quite a few nice ones...

Otherwise Jack is right - the surest way is to make the text into an image.

Aemirys · « **Reply #3 on:** December 30, 2011, 06:37:54 pm »

Quote

Instead of words for color (red, green, orange...), you can use standard RGB code (000000 for black, 111111 for white)

Awesome! Thanks Jouzinka using RGB code will be perfect!

Quote

A part solution is to use fonts that are standardly installed in Win and Mac as there are quite a few nice ones...

Can you expand on that a little for me please?

P.S. - feel free to PM if you want.

P.P.S - And my very grateful thanks for your help!

Beguile's Mistress · « **Reply #4 on:** December 30, 2011, 06:41:10 pm »

You need to watch if you switch browsers or versions of a browser as all codes don't translate from one to the other and the fonts and colors will default to the originals in the program. i.e., if the browser doesn't recognize the color code it defaults to black.

Aemirys · « **Reply #5 on:** December 30, 2011, 06:47:43 pm »

I've just switched to using Opera actually.

jouzinka · « **Reply #6 on:** December 30, 2011, 06:51:09 pm »

What BeMi said. There's a set of 160 (? I think - it's been ages since I coded anything) colors, called "web-safe" meaning they are usable and recognizeable by web browsers.

Ad fonts.

When you freshly intall a new computer, there's a certain set of fonts on it that the computer and the programs within can reach to and work with it, let's call them defaults. These fonts fall into two most basic categories - serif and sans-serif - that later divide and divide into oblivion. When you code a website, you generally state a desired font that you want to appear on the site, then a font of the defaults installed on every computer in case your specific isn't available, then a general category in case even the default font isn't available (browsing web on a mobile phone, for [lame] example).

It works the same way for your O&Os. If you choose a font that you have on your computer, named Super Fancy Font, it will appear correctly on your computer, exactly the way you want, because you have Super Fancy Font installed on your computer. I don't. So, if I view your O&Os, in order to display the page at all, my computer will supply a different font than Super Fancy Font, which will likely lead to layout problems.

So, I just wanted to advise you to stick to the default fonts, rather than some stuff that you somehow sometime downloaded from somewhere.

Quote from: Aemirys on December 30, 2011, 06:47:43 pm

I've just switched to using Opera actually.

Your browser is relevant, but not all people who are going to view your O&Os will view it with Opera.

... oh the pain of optimizing.

Aemirys · « **Reply #7 on:** December 30, 2011, 06:51:55 pm »

I've still got IE installed on the system but I plan on using Opera as my primary browser.

Well actually it would be more accurate to say I plan on using it exclusively. That's the plan so far anyway.

I only just switched to Opera as of yesterday, but so far so good. I can't see myself needing or using another browser.

But I also live by the maxim, 'Never Say Never.'

JackWhite · « **Reply #8 on:** December 30, 2011, 06:57:56 pm »

They mean that you only need to check with for example IE whether or not your O/O page looks the ame as on Opera. If it is it will be probably the same for all browsers and you know that everyone sees your page the same as you do.

Aemirys · « **Reply #9 on:** December 30, 2011, 07:04:52 pm »

Quote

When you freshly intall a new computer, there's a certain set of fonts on it that the computer and the programs within can reach to and work with it, let's call them defaults. These fonts fall into two most basic categories - serif and sans-serif - that later divide and divide into oblivion. When you code a website, you generally state a desired font that you want to appear on the site, then a font of the defaults installed on every computer in case your specific isn't available, then a general category in case even the default font isn't available (browsing web on a mobile phone, for [lame] example).

So I just supplant the standard fonts with the name of any one of these other fonts....? So I don't need to worry about some fancy schmancy code to represent the font name or anything......?

Just like this......

Code: [Select]

[font=Super Fancy Font]This text will look really nifty with Super Fancy Font[/font]

jouzinka · « **Reply #10 on:** December 30, 2011, 07:08:12 pm »

Exactly.

Aemirys · « **Reply #11 on:** December 30, 2011, 07:23:32 pm »

I was thinking it was more complicated than it actually was !!

Thank you so much Jouzinka and BeMi for walking me through that !!

-dives right in and gives them a big thank you hug-

I will try it out and let you know how it goes either way.

-bounces off excitedly to test it out-

Caeli · « **Reply #12 on:** December 31, 2011, 12:57:40 am »

One thing that you also need to keep in mind is that different users will have different browser/screen widths or resolutions that will also change how your page will look.

For example, the computer I'm using right now is has a screen resolution of 1600px (width) by 900px (height). I believe my laptop's screen resolution is 1400px wide, but I do not maximize my browser, so it's actually more around 1000 to 1200 pixels. I know some people on Elliquiy might still use monitors that have 1024 width resolutions.

Mostly, it's not going to matter - but if your layout is table-centric or utilizes inline images, you should check commonly-used browser widths just to make sure that your layout doesn't go to hell on something that isn't as wide as the screen you're using.

If you plan on using super-special fonts, the best way is to use images in place of actual text. If you prefer not to use images, then it's fine to use special fonts - but a nice way to make sure that people who view your page have the option of seeing your ONs and OFFs as you mean to have it seen is to provide a link to the font that you're using, from wherever you downloaded it. Not everyone will download it, obviously, but for most people, it's a relatively painless and very easy process to install new fonts.

Aemirys · « **Reply #13 on:** December 31, 2011, 02:09:15 am »

Quote from: Caeli on December 31, 2011, 12:57:40 am

Mostly, it's not going to matter - but if your layout is table-centric or utilizes inline images, you should check commonly-used browser widths just to make sure that your layout doesn't go to hell on something that isn't as wide as the screen you're using.

I was thinking of heading down this path but as it stands I don't quite yet know how far I'll take it.

Quote from: Caeli on December 31, 2011, 12:57:40 am

If you plan on using super-special fonts, the best way is to use images in place of actual text. If you prefer not to use images, then it's fine to use special fonts - but a nice way to make sure that people who view your page have the option of seeing your ONs and OFFs as you mean to have it seen is to provide a link to the font that you're using, from wherever you downloaded it. Not everyone will download it, obviously, but for most people, it's a relatively painless and very easy process to install new fonts.

My personal preference would be to not use images in place of actual text but I can already see that eventually once I've gotten my layout to certain stage that I will incorporate them.

Thank you for your guidance Caeli.

Might I be so bold as to ask for your permission to perhaps PM you to discuss and yes I'll be honest pick your brains over similar topics in the future?

*takes on the tone of someone meeting their idol in person*

Your formatting is just simply stunning I couldn't use enough adjectives to adequately describe how awesome it is and of how much I am in awe of formidably formatting prowess.

*bows respectfully before Sensei Caeli*

JackWhite · « **Reply #14 on:** December 31, 2011, 02:19:48 am »

Quote from: Caeli on December 31, 2011, 12:57:40 am

If you plan on using super-special fonts, the best way is to use images in place of actual text. If you prefer not to use images, then it's fine to use special fonts - but a nice way to make sure that people who view your page have the option of seeing your ONs and OFFs as you mean to have it seen is to provide a link to the font that you're using, from wherever you downloaded it. Not everyone will download it, obviously, but for most people, it's a relatively painless and very easy process to install new fonts.

Isn't it easier to download it yourself and just drop your text in an image? That way you can do whatever you want with your text and it still is the same for everyone. Plus no one has problems with the font that she has chosen.

Aemirys · « **Reply #15 on:** December 31, 2011, 02:32:03 am »

Quote from: JackWhite on December 31, 2011, 02:19:48 am

Isn't it easier to download it yourself and just drop your text in an image? That way you can do whatever you want with your text and it still is the same for everyone. Plus no one has problems with the font that she has chosen.

Quote from: Aemirys on December 31, 2011, 02:09:15 am

My personal preference would be to not use images in place of actual text but I can already see that eventually once I've gotten my layout to certain stage that I will incorporate them.

So yes I will end up using images in the place of text.

JackWhite · « **Reply #16 on:** December 31, 2011, 02:40:10 am »

Totally read over that part. Sorry, it's still early here.

Aemirys · « **Reply #17 on:** December 31, 2011, 03:12:53 am »

-chuckles-

No problem.

Aemirys · « **Reply #18 on:** December 31, 2011, 05:02:19 am »

Isn't that always the way it happens.....?

Right when you get to the good part you get interupted!

First I got hijacked.... then once free of that I got waylaid.... then I got distracted.... then I got waylaid again....

But I won't keep you in suspense, it worked!

So a big thank you again to all of you for helping this troglodyte evolve just a little more!

JackWhite · « **Reply #19 on:** December 31, 2011, 05:05:02 am »

We'll be looking forward to the outcome.

Caeli · « **Reply #20 on:** December 31, 2011, 01:11:40 pm »

Quote from: Aemirys on December 31, 2011, 02:09:15 am

Thank you for your guidance Caeli.

Might I be so bold as to ask for your permission to perhaps PM you to discuss and yes I'll be honest pick your brains over similar topics in the future?

*takes on the tone of someone meeting their idol in person*

Your formatting is just simply stunning I couldn't use enough adjectives to adequately describe how awesome it is and of how much I am in awe of formidably formatting prowess.

*bows respectfully before Sensei Caeli*

Thanks. :) I know it's not the most intricately formatted thread out there, but I think that's my design bias playing in there - I prefer simple and clean!

And of course, please feel free to PM me if you have questions about coding in general, or even just want to chat.

Vekseid · « **Reply #21 on:** December 31, 2011, 01:12:57 pm »

Quote from: Aemirys on December 30, 2011, 05:53:16 pm

Hi....

I've finally gotten the chance to sit down and play around with the design and layout of my O/O pages and I was wanting to incorporate custom fonts and colours into my pages.

What I'm seeking help with and would like to find out is how I can go about using fonts other than those in the font face drop down box.

I also was curious about the same thing but for colours other than the standard ones in the drop down box.

Can anyone offer advice or guidance on this matter or perhaps place me on the path that will.....?

Thank you so much for your time.

Aemirys.

This is Lucida Bright. She's very happy to meet you. You put her in just like any other font, but only the ones in the dropdown (Microsoft's 'core fonts for the web') can be guaranteed to appear for all users. You can also safely use Tahoma, because nearly every Linux user will also have it or something closely equivalent.

I'm hoping to include Webfont support to support open source fonts with the new CMS. We'll see how that goes, however. It's a periphery concern, but it would be nice to see some fonts like the Libertine and SIL's fonts some more love.

Oreo · « **Reply #22 on:** December 31, 2011, 01:17:53 pm »

I think the most frustrating thing with nearly all general site fonts is there are no feminine or script choices. It would be nice to see a couple of options that lean toward a soft aesthetic.

Aemirys · « **Reply #23 on:** December 31, 2011, 01:58:39 pm »

Quote from: Oreo on December 31, 2011, 01:17:53 pm

I think the most frustrating thing with nearly all general site fonts is there are no feminine or script choices. It would be nice to see a couple of options that lean toward a soft aesthetic.

I second that!

Aemirys · « **Reply #24 on:** December 31, 2011, 03:14:53 pm »

Quote from: Caeli on December 31, 2011, 01:11:40 pm

Thanks. :) I know it's not the most intricately formatted thread out there, but I think that's my design bias playing in there - I prefer simple and clean!

And of course, please feel free to PM me if you have questions about coding in general, or even just want to chat.

Thanks Caeli!