We help IT Professionals succeed at work.

Using a non-standard (PC, Mac) font on my webpage

Andy Brown
Andy Brown asked
on
I would like to use a non-standard (PC, Mac) font on my webpage.

I have two fonts: browa.oft & browa.eot.  At present I can display the text correctly (on my machine) if pointing to the .oft font, but not the .eot, which I understand is the one I need to put onto our webserver.

There is a command called "font-face", but I have no clue as to how to put this into the html.

Any help would be greatly appreciated.
FontTest.html
Comment
Watch Question

Don't talk to me.
CERTIFIED EXPERT
Commented:
You can't use font-face because it assumes the target font is present on the user's machine.  Since this is non-standard, it probably won't ever be there, right?

Use cufon to do it:

http://cufon.shoqolate.com/generate/
You can create a font family in CSS that will attempts to use your non-standard font first if it exists on the user’s machine, then defaults to a standard font if it doesn’t.  If you must have a specific font, save your text as an image first.
Kyle HamiltonData Scientist
Most Valuable Expert 2014
Commented:
You could use font-squirrel to generate the required fonts and styles:

Simply upload your font, and it'll create all the necessary assets for your page including a sample and instructions.


http://www.fontsquirrel.com/fontface/generator
The first input is the basis for why this won't work.  You either have to ask the average anonymous user to add the font to their system, then restart the browser, in which case the font will be found on their system by their browser ..... or you cannot do it.  It is not practical for sites attracting many people to ask them to put your custom font on their system.  They won't do it.  Hence the only realistic choice is to use a graphic file to display that font.  Then use a standard font for the rest of the text.  Remember, the graphics are not seen by search engines as text, therefore not indexed as key words.
Kyle HamiltonData Scientist
Most Valuable Expert 2014
Commented:
Yes it is possible.

Here is a sample file with the webfont in place as generated by font-squirrel from browa.ttf which I found on the web.

browa sample webfont

I don't know for a fact that this is your Browa (it seems mighty close to Helvetica), but you can do this with almost any font.
Keith BrownAWS System Administrator
CERTIFIED EXPERT
Commented:
As your sample code has it, they have to have the font installed. You can specify a font file using @font-face. Most browsers support TrueType fonts (what most fonts are), but IE only uses the special EOT font format. There are free sites with tools to convert TTF to EOT, such as FontSquirrel. When it comes to Open Font Type, your milage may vary in regards to browser support, but most should be fine. Note how I refer to multiple font files in the example, so that one of the files should work for the browser.

@font-face
{
font-family: myFirstFont;
src: url('http://mywebsite.com/urlforfont.ttf'),
     url('http://mywebsite.com/urlforfont.eot'); /* IE */
}

Open in new window


Now, after that is there, you can use the font, like with
div
{
font-family: myFirstFont;
}

Open in new window

Andy BrownDeveloper

Author

Commented:
Thank you everyone for all of your help on this - very much appreciated.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.