11 Replies - 1984 Views - Last Post: 29 December 2008 - 11:32 AM

#1 hockey97  Icon User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

How to make your own Fonts and use them on website with css...

Post icon  Posted 10 December 2008 - 01:22 AM

Hi, I would love to know how I could make my own font and use them on my website using css.

If I can do this... I was thinking to make 2 or 3 different sets to show different fonts for different stuff.
Is This A Good Question/Topic? 0
  • +

Replies To: How to make your own Fonts and use them on website with css...

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6233
  • View blog
  • Posts: 10,782
  • Joined: 28-September 07

Re: How to make your own Fonts and use them on website with css...

Posted 10 December 2008 - 05:54 AM

You can create your own fonts with font editors/creators.... I myself have been looking for a free one without much luck... if you find one let me know. However, using an oddball font on a website is a tad more complicated than just declaring it in your CSS.
Was This Post Helpful? 0
  • +
  • -

#3 hockey97  Icon User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

Re: How to make your own Fonts and use them on website with css...

Posted 10 December 2008 - 02:36 PM

View PostBenignDesign, on 10 Dec, 2008 - 04:54 AM, said:

You can create your own fonts with font editors/creators.... I myself have been looking for a free one without much luck... if you find one let me know. However, using an oddball font on a website is a tad more complicated than just declaring it in your CSS.



well, I know how to make fonts on the computer.. .well with windows. The windows OS has it's own program that is free where you can assigne your font.

you have to make each letter from caps to lowercase to numbers to sybmols.

What I want to do is have my own custom font for my website. I would like to declare the font with css.. I know how to use existing font styles with css.

I am trying to make my website look professional and have it's own image.
Was This Post Helpful? 0
  • +
  • -

#4 fuzzylunkinz  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 185
  • Joined: 11-November 08

Re: How to make your own Fonts and use them on website with css...

Posted 11 December 2008 - 09:46 PM

From what I know fonts on websites are all used client-side. That's why when you declare a font-family you need to include fonts that will work on several different operating systems.

For example, I like to use Arial on Windows. The Linux 'equivalent' to Arial is Helvetica (I don't know the equiv. for Mac), so I would do
body{
font-family: Arial, Helvetica;
}


where you can use it in wherever you want, not just body.

If you want to use your own font, you would have to use some sort of hack with server-side scripting to tell the client to use a server-side font.

Another possibility is to use images of your fonts. This is probably a bad idea, unless you're looking for a header image etc., because you don't want to use all that unnecessary bandwidth (unless it was free :huh:). Some people are still on dial-up, too.

EDIT:
Looks like you were a little less vague in your second post.

Open up your favorite image manipulation program (I like GIMP), put your font in, and save it as an image.

This post has been edited by fuzzylunkinz: 11 December 2008 - 09:52 PM

Was This Post Helpful? 0
  • +
  • -

#5 pr4y  Icon User is offline

  • Location: 127.0.0.1
  • member icon

Reputation: 35
  • View blog
  • Posts: 621
  • Joined: 19-September 08

Re: How to make your own Fonts and use them on website with css...

Posted 11 December 2008 - 09:50 PM

I'm not even sure CSS supports loading server-side fonts in the first place? Reason being is that fonts are loaded client-side. The CSS just tells the client what font to be using, so unless they have the font installed on their PC... they will see empty font boxes:

_
| |
|_|


EDIT:

PPL type 2 fast -.-

Also, my empty font box fails.

This post has been edited by pr4y: 11 December 2008 - 09:50 PM

Was This Post Helpful? 0
  • +
  • -

#6 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6233
  • View blog
  • Posts: 10,782
  • Joined: 28-September 07

Re: How to make your own Fonts and use them on website with css...

Posted 12 December 2008 - 05:09 AM

There is a program called WEFT from Microsoft that is supposed to allow you to embed a font on a website. I have used it once or twice with mixed results... I think there is a newer release than what I'm using though. Give it a shot and best of luck!
Was This Post Helpful? 0
  • +
  • -

#7 mavrck  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 23-December 08

Re: How to make your own Fonts and use them on website with css...

Posted 23 December 2008 - 03:02 PM

The best way to do this is embedding the font via SIFr/flash. See the following:

http://www.mikeindus....com/blog/sifr/
http://en.wikipedia....ash_Replacement

We use it all the time for clients.

This post has been edited by mavrck: 23 December 2008 - 03:03 PM

Was This Post Helpful? 0
  • +
  • -

#8 ~NJ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 52
  • Joined: 22-December 08

Re: How to make your own Fonts and use them on website with css...

Posted 23 December 2008 - 03:09 PM

You could have a look at something like Facelift which I've seen before but at the time I wasn't too interested in it.

What it does is convert text to images which can contain any funky looking fonts you want. But the nice thing about it is that it will continue to display a default font until the image is completely loaded.

Check it out with some examples:
http://facelift.mawh...r.net/examples/

And if you're eager to try it out on your own site:
http://facelift.mawh...ad/?latest=true
Was This Post Helpful? 0
  • +
  • -

#9 mavrck  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 23-December 08

Re: How to make your own Fonts and use them on website with css...

Posted 23 December 2008 - 04:09 PM

Not that one or the other is better, but SIFr is client side based and Facelift is server side based.

I personally would like to distribute the load onto the clients, but maybe that's just because I've been a hardware guy.
Was This Post Helpful? 0
  • +
  • -

#10 ~NJ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 52
  • Joined: 22-December 08

Re: How to make your own Fonts and use them on website with css...

Posted 23 December 2008 - 04:41 PM

Well as I said, I've never tried it so I can't really vouch for it's stability or functionality. Just throwing it out there for someone who might find it useful ;)
Was This Post Helpful? 0
  • +
  • -

#11 Guest_SovietRussia*


Reputation:

Re: How to make your own Fonts and use them on website with css...

Posted 25 December 2008 - 12:40 PM

Well, currently, the only option is to save it as an image, or embed the font as mentioned above.

However, as more browsers become CSS3 compliant, you're gonna start seeing custom being used.
If you download the Opera 10 alpha here, which has support for fonts to be included in webpages, you can try out putting in web fonts, as I'm sure other browsers will follow suit.
The Opera 10 development blog has sample code for implementing this through CSS here, and a few examples, if you want to try this out.
Was This Post Helpful? 0

#12 hockey97  Icon User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

Re: How to make your own Fonts and use them on website with css...

Posted 29 December 2008 - 11:32 AM

Thanks for the replies. I might hold off on custom font.... seems to be complicated.

My website has a icy theme. I was hoping to make the font text to have icy letters.

I know windows has a free font program that allows you to load your new set of fonts onto your system.

I have done it before using a paint program I would then use the windows free program that is located inthe system folder.

Then I was able to use it. Even with CSS.

So I would just type the name I gave that font and on the website I was working on I was able to see that font.

but like you guys said the font is client-sided.

So I think I will wait and hold off on a custom Font .

I have been frustrated with website developement. Just because so many different browsers are being used and we have to fix any difference in the layout. Which I had a hard time with.

Thanks for the replies.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1