Geek Answers Handbook

How to use our own fonts on websites that are compatible with all users?

I need to use different hi-style fonts on my web page. But I was afraid that if the user does not have such a font, then they will be displayed in the default font. How to use a new font that should be compatible with all users?

+4
source share
10 answers

Consider using the regular font that everyone has for body-text, the bulk of your content. There are quite a lot to choose from. For headings, use a set of drawings (for example, MS Paint, Photoshop) to format headings as images using your preferred font. If you want to include a fancier font for your body text, you can always resort to something similar in your CSS:

font-family: <some-fancy-typeface>, Calibri, "Gill Sans MT", Helvetica, Tahoma, Arial, sans-serif;

Remembering that you will try to use your fancier font first, and then drop the list of more mundane choices until a match is found. Keep in mind that in terms of usability, most people prefer the simple Helvetica or Times Roman font for their body text (consider Google, Yahoo !, Stack Overflow ...). Distributing bitmap headers, of course, is part of the spice of web life.

+4
source

I am using Cufón . It works with all modern browsers, lightweight and relatively easy to configure.

+4
source

You could take a look at something like sIFR or TypeKit , which will use flash and javascript respectively to fix custom fonts.

There are currently not many browsers that support @font-face .

+3
source

Read this about dynamic fonts.

So you need dynamic fonts, huh?

Dynamic fonts

Dynamic fonts are font style files that are loaded with the page that will use them. Think of them as an image. This is the basic concept.

When you use these fonts, the font file will load into your cache as an image. Sometime, unless you clear your cache completely, the font will be there for all future visits. It is interesting to watch pages when using these fonts for the first time. The page will be full with text in the default format. Then, as soon as the font or fonts, load, load the whole page and comes to life. This is a great effect.

Using these fonts is basically Netscape Navigator 4.0 or better. However, you can also view fonts using MSIE 4.0 and above, if you also include the font, the Active X Assistant application.

+1
source

You say you “need” to use “hi-style” fonts for your web page. If so, you need to talk to Bob Kaufman. The problem with using images for text, however, is that it completely destroys indexing, search, etc. Instead, consider not doing this and stick to a priority list of fonts.

When you specify font-family , you can specify a list, and the first matching font will be used. This allows you to gracefully degrade - if the user has his own fantasy font, excellent, but if the next best option is not used (as defined by you), for example:

 body { font-family: "Nifty Cool Font", "Times New Roman", Georgia, Serif; }

See the w3schools page for the font-family property for details.

+1
source

Some web pages use a Flash movie for the title only, in which the font can be embedded. You can use images (automatically generated). I personally think that every bit is unprofessional, but different people balance usability and standards against design in different ways.

And if you redistribute fonts, make sure you look at the legal implications.

0
source

you can sue javascript to achieve this.

Here is an example library.

There may be more libraries that can do the same.

0
source

You can use CSS (as mentioned earlier) to link to .TTF files as shown below: http://weston.ruter.net/2008/08/27/efficiently-serving-custom-web-fonts/

Sincerely.

0
source

If you have few IE visitors to your site, you can use CSS 3 web fonts

0
source

Depends on which font you want to use ... the easiest solution is to use the @font-face method. If you enable only the microsoft format (.EOT), it will work in ANY browser.

Font Squirrel contains an excellent collection of free commercial font sets, which include:

  • Original TrueType or OpenType Fonts for Firefox 3.5 and Safari
  • EOT Fonts for Internet Explorer
  • SVG fonts for Opera, iPhone and Chrome
  • WOFF Fonts for Firefox 3.6+
  • Demo.html and stylesheet.css so you can speed up.

The @font-face method does not require Javascript or Flash, as the previously mentioned sIFR and Cufon methods, so it is more accessible to everyone.

It is fully SEO optimized and scalable.

0
source

More articles:


All Articles