how to use fonts in css other than available fonts in font family

fonts, css, gothic

[nehrav]

Hi frndz,

I want to know how I can use the fonts in css other than available fonts in dreamweaver. I want to using Gothic font, but its not available in font family.....

I read about embed fonts....but not sure it will work 100% and not familiar with this process also.

Any suggestions....

[lavazza]

You can specify ANY font... but... unless it is installed on/accessible from the UA (e.g browser, printer, etc), then it WON'T (can't) be used

For this reason, use something like the following - which specifies a similar looking (? ? ? and possibly more common ? ? ?) font as a 'first fallback' and finally Arial (an almost universal font) as the 'last hope'

font-family:"Century gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;

[nehrav]

Is there any way that I can use exactly the same font by putting it somewhere in the directory and then calling it from there.......

[birdbrain]

Hi there nehrav,

I would suggest that you try a search for...

@font-face browser support

birdbrain

[rocknbil]

Your initial instinct is correct. You can deploy and embed fonts on your web pages for clients who don't have them, but it's a rather complex process and as you suspect, may or may not work in all cases anyway. For example, you need to deploy both a Windows and Mac equivalent for a given font, and any other potential OS that may visit your site.

The details are a bit hazy as it's been a few years since I chased this one, and I seem to remember something about the user having to accept the install, which can deter visitors that don't understand it's meaning (may be completely false, as I said, hazy!) I've never actually went down this path, but "embed fonts web page" should lead you to some methods, tutorials, and demos.

[swa66]

embedding fonts: not a fan myself, not at all.
- it's still just one choice of a font in a series of fonts
- you need the oet for IE and a regular format for normal browsers.
- oet fonts are a pain to convert
- it slows down your pages (downloading, installing fonts)
- license issues with fonts (you generally will not have the right to redistribute fonts)

For what? For a slghtly different font ? Not worth the trouble in my book.
If you really need to have a specific font for a logo or title: use text replacement with an image: works everywhere.

Body fonts: 99.9% of people will not even notice the difference between 2 fonts.

[D_Blackwell]

Designers have been locked into the same pitiful short list of fonts for waaaay too long. The now rapid adoption rate of CSS3 will make it fairly easy to dictate fonts to most users. It's about time. Those that 'opt out' are free to do so.

IE8 and Chrome are the big offenders in restricting @fontface use and skipping to the next selection (same-old-same-old).

Yes, IE requires oet, but MS provides WEFT, a conversion tool for converting to OET. Takes some getting used to, and there are some tricks, but no different that learning any other tool. OET is only an issue with IE, and conversions just aren't that big a deal anymore, though there are limitations (as always with them) and testing is important.

Font file download is sometimes a factor to consider.

[nehrav]

Thanks for your valuable suggestions frndz,

Someone suggest me SIFR also, anybody have experience with that....?

[swa66]

Image replacement with images works in every browser. If you replace it with flash you end up with those blocking flash seeing nothing.
Moreover image replacement with images can be done entirely in the CSS.

[D_Blackwell]

An alternative to images and similar options to get the type that you want, but no good for chunks of text; paragraphs, pages.... It has it's place but does not, and will not, address lack of font support.

We've got how many fonts that work crossbrowser? So few that generic-family is probably 'good enough'. Graphic (print) people have thousands of font options. Everything is place to offer same as online text if browsers go along. Users can still disable.

[D_Blackwell]

you end up with those blocking flash seeing nothing.

sIFR is another text replacement technique, and Accessible. Blocking flash simply causes the page to display the HTML/CSS that backs it up instead.

[swa66]

Just as an example on how to do image replacement:

h1 {
 text-indent: -9999px; /* move text way left to hide it */
 width: 460px; /* size of the image */
 height: 84px; /* size of the image */
 background-image: url('title.png'); /* text in fancy font */
}

[swa66]

Blocking flash simply causes the page to display the HTML/CSS that backs it up instead.

That's not what I've seen at sites that do that [I block scripting and flash using NoScript myself]. Maybe it were bad examples, dunno.

[D_Blackwell]

sIFR is one of several second-tier options to the hopefully not to be botched by browsers and users @fontface option with CSS3, but deployed correctly, Javascript and Flash blocking users will get the HTML text instead of the font replacement, It does degrade (literally - Ha.) to present the ho-hum HTML text.