Categories
Browsers Internet

How to embed a True Type Font on your web page?

You may have an interesting or weird font type that you want on your web page, but in order for other people to be able to see this font you will need to embed it on your web page. Why? Because when a visitor views a web site, the only fonts that will display are those installed on the visitors system!

So if you want either a weird gothic font or an old Celtic font such as in the main logo of my site (which is actually an image) you will need to either display the font in an image or embed the font in your web page.

Why Use Embedded Fonts?

Because a font is an operating system resource, not a browser resource. If you have an unusual font installed on your PC, it’s easy to design a Web page and include that font. You can see it because the font is installed on your operating system. But if your visitors don’t have it installed too, their browsers will display their default font instead.

From a page designer’s perspective, this is a big weakness. You want pages to display like you intend, but can’t control an individual browser’s display. No matter how carefully you lay out your page with a particular font, you’re at the mercy of the user’s browser when the page is displayed.

That’s where embedded fonts come in: with them, you don’t have to worry about browsers defaulting to a more common font. Instead, your font downloads along with the page.

1. Locate And Use The Font

Finding fonts is easy. Once you’ve found the perfect font, you’re ready to download it to your computer and use it in your page design.

Do some research first though: some designers don’t allow their fonts to be embedded. TrueType fonts have embedding permissions encoded within them. Please respect the designer’s wishes to avoid any potential copyright problems!

2. Create An Embedded Font File

You have to use a third-party application that creates an embedded font file using the font you installed locally on your hard drive. This task may be time-consuming because Netscape and Explorer both use different formats.

Recently though, Netscape updated its method to support Explorer browsers. Microsoft continues to use a proprietary technology.

Create embedded fonts using one of 2 available formats:

  1. Portable Font Resources (.pfr): TrueDoc technology was developed by Bitstream and licensed by Netscape. It can be viewed by Navigator 4.0+ and Explorer 4.0+ on Windows, Mac, and Unix platforms.
  2. Embeddable Open Type (.eot): Compatible only with Explorer 4.0+ on the Windows platform. Create .eot files using Microsoft’s free Web Embedding Font Tool (WEFT).

After you’ve created the embedded font file, you’re ready to attach it to a CSS.

3. Attach To Your Style Sheet

  1. Into the HEAD section of your document insert:

    Example with True Type

    To work in IE4 and above, you need to add a pointer to an ActiveX control immediately after the LINK tag OR ELSE create an OpenType file for Explorer and refer to both on your page.

    TrueDoc fonts stay within the browser: you can’t download them to your system

    Example with Open Type

This method works in IE5 & IE6 but is not supported by Firefox/Opera.

A List Apart have an article on Dynamic Text Replacement which presents an interesting method for replacing blocks of text such as headers with dynamic images. Worth checking out.

This method works in IE5 & IE6 but is not supported by Firefox/Opera.

'Coz sharing is caring
Categories
Internet

Ports

Any server machine makes its services available to the Internet using numbered ports, one for each service that is available on the server. For example, if a server machine is running a Web server and an FTP server, the Web server would typically be available on port 80, and the FTP server would be available on port 21. Clients connect to a service at a specific IP address and on a specific port.

Each of the most well-known services is available at a well-known port number. Here are some common port numbers:

  • echo 7
  • daytime 13
  • qotd 17 (Quote of the Day)
  • ftp 21
  • telnet 23
  • smtp 25 (Simple Mail Transfer, meaning e-mail)
  • time 37
  • nameserver 53
  • nicname 43 (Who Is)
  • gopher 70
  • finger 79
  • WWW 80

If the server machine accepts connections on a port from the outside world, and if a firewall is not protecting the port, you can connect to the port from anywhere on the Internet and use the service. Note that there is nothing that forces, for example, a Web server to be on port 80. If you were to set up your own machine and load Web server software on it, you could put the Web server on port 918, or any other unused port, if you wanted to. Then, if your machine were known as xxx.yyy.com, someone on the Internet could connect to your server with the URL http://xxx.yyy.com:918. The “:918” explicitly specifies the port number, and would have to be included for someone to reach your server. When no port is specified, the browser simply assumes that the server is using the well-known port 80.

'Coz sharing is caring