How do I add a font to a web site?

To use a font in your CSS, you have to define it first using the font-face tag. Something like this:

@font-face {
    font-family: MyFunkyFont;
    src: url(‘Drop.ttf’);
}

#Green_Text {
      font-family: MyFunkyFont;
}

The src of the font-face is relative to the CSS file itself, so if you store your fonts inside a 'fonts' folder under the same folder that contains your CSS, you would need to use:

src: url(‘fonts/Drop.ttf’);

You will need to use several different versions of the same font to ensure it works across all browsers. TTF won't work across all browsers, so you'll need WOFF / EOT / SVG copies of it. You then build up your @font-face tag to use all of them:

@font-face {
  font-family: 'MyFunkyFont';
  src: url('drop.eot'); /* IE9 Compat Modes */
  src: url('drop.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('drop.woff2') format('woff2'), /* Super Modern Browsers */
       url('drop.woff') format('woff'), /* Pretty Modern Browsers */
       url('drop.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('drop.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Select allOpen in new window

You can use a service like FontSquirrel's Generator - https://www.fontsquirrel.com/tools/webfont-generator - this allows you to upload your TTF. It will then convert it to the other formats and you can download the whole lot.

When using fonts like this, you should also offer a fallback (for example sans-serif) in case the browser can't load them:

#Green_Text {
      font-family: MyFunkyFont, sans-serif;
}

@font-face {
    font-family: 'My Own Font Name Drop';
    src: url(/seabreezesoftware.com/Joes/Drop.TTF);
    font-weight: normal;
}
#Green_Text
{
      font-family: 'My Own Font Name Drop';
       font-size: 24px;
       font-weight: normal;
       font-style: normal;
      color: #4cbb17;
}

Select allOpen in new window

AHHHHHHHH!  I thought this we be an easy one.  It's just a mock up, but the a-hole has to has his font.
I'm leaving this open for a day or two..  I'll get back to you.

Thanks

Haha ! I feel your pain. I've lost count of the number of times I've had clients say 'can we just change the font to XXX!'. A simple explanation of copyright rules and fines that can be imposed tends to bring them to their senses, and I usually just point them to Google Fonts to find somthing else they like instead :)

No joy with the font!

i've attached the code and the css as well as a print of the directory.

The text still prints in a standard font.

What am I screwing up?
Font_test.css

Sorry, I hit the enter key.
Font_test.php
Joe_Dir.JPG

Couple of issues I see. In your CSS you are referring to drop.ttf, whereas your file listing shows it as Drop.TTF. If you're on a Linux based system, then filenames as case-sensitive, so drop.ttf is not the same as Drop.TTF

Also, your file listing only shows that you have the ttf and woff formats, but your font-face tag references the eot and svg versions as well, so make sure you have those in your file system.

Yeah, I hate Linux.  I keep forgetting the upper lower case.

Your solution kind of worked.  But the text is funky.

Take a look at this url:
http://seabreezesoftware.com/Joes/Font_test.php

I'm using Firefox. What are the "eot" and "svg" extensions for the browsers?

Once I get all the text to use the same font, how do I get the drop char to be in black rather than green?

You have given your div an id of Green_Text which loads this rule

#Green_Text {
	font-family: Drop;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	color: #4cbb17;
}

Select allOpen in new window

You could change the color to color: #000 but that would sort of defeat the Green_Text name - so I would make a class for your general font rules and another for the colour and apply accordingly

Did you look at the url?  Why does the first "P" in phone have a different font then the "hone" and the phone number has the wrong font as well.

Where can I find info for the " class for your general font rules and another for the colour and apply accordingly"?  
Don't want to bother you with this until I run into a problem.

That's interesting - have you tried playing with the combinations of your font references - maybe just try the ttf and woff files to start with - see if that make a difference.

Where can I find info for the " class for your general font rules and another for the colour and apply accordingly"?  

What I meant was put the styles that cover the general aspects of the font in one class

.drop-font {
 font-family: Drop
 font-size: 24px;
}

Select allOpen in new window

And then put the colour in its own class

.Green_Text {
   color: #4cbb17;
}

Select allOpen in new window

Then add to your elements like so

<div class="drop-font Green_Text">...</div>

Select allOpen in new window

EOT and SVG are different versions of fonts. EOT (Embedded Open Type) is designed by Microsoft and works in older version of Internet Explorer. SVG (Scalable Vector Graphics) works in Safari and Android browsers. If you want full cross-browser compatibility, then you'll need all 4 versions of the font. If you miss any, then your font won't work in some browsers.

The reason you have a funky P, is because your font file only contains characters for the lowercase letters a-z. It doesn't include uppercase letters and it doesn't include numbers. You can get around the uppercase issue by making sure the text in your browser is set to 'phone' and not 'Phone'. Nothing you can do about the missing numbers though - the designer simply chose not to include them, so if you want numbers, use a different font (or at the very least find a more complete version of it!)

To add to Chris's comment, you can use "text-transform: lowercase" to handle making the text all appear in lowercase (that will look to be in uppercase when using this particular font),  instead of having to run it through some process to make it all really lowercase.

Okay,  everyone is spending to much time on this.  It's just a mock up.  

Let's do it the easy way,  How do I find out what fonts are available to me at the web site.  This way I can just do the page and when they don't like the font, I can change it later.