How do I add a font to a web site?

I need to use a font in a web site ("1998A__TFF").  This was down loaded from the net.  
Where do I put it on the site to access it.  I've tried the root and a sub with no joy.

The css reads:
#Green_Text
{
      font-family: /seabreezesoftware.com/Joes/Drop.TTF;
       font-size: 24px;
       font-weight: normal;
       font-style: normal;
         color: #4cbb17;
}

The code reads:
<?php
echo "<div id=\"Green_Text\" align =\"center\">";
            echo "Phone:  (908) 881-9615";
            echo "<br>";
            echo "2032 Morris Avenue, Union  NJ";
            echo "</div>";
?>      

What an I doing wrong?
breeze351Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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 */
}

Open 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;
}
0
Julian HansenCommented:
@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;
}

Open in new window

0
breeze351Author Commented:
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
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Chris StanyonWebDevCommented:
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 :)
2
breeze351Author Commented:
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
0
breeze351Author Commented:
Sorry, I hit the enter key.
Font_test.php
Joe_Dir.JPG
0
Chris StanyonWebDevCommented:
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.
0
breeze351Author Commented:
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?
0
Julian HansenCommented:
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;
}

Open 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
0
breeze351Author Commented:
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.
0
Julian HansenCommented:
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;
}

Open in new window

And then put the colour in its own class
.Green_Text {
   color: #4cbb17;
}

Open in new window


Then add to your elements like so
<div class="drop-font Green_Text">...</div>

Open in new window

0
Chris StanyonWebDevCommented:
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!)
1
David S.Commented:
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.
0
breeze351Author Commented:
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.
0
Chris StanyonWebDevCommented:
For web fonts, your best bet really is to use Google Fonts. They have approximately 900 fonts that you can use for free. Basically, you add a link to the font files (just like any other CSS) and then you can use those font in your own CSS, for example:

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">

You can include several fonts all in one line (although for speed, I wouldn't really go above 3)

And then in your own stylesheet, you can use them like so:

h1 { 
    font-family: 'Abril Fatface', cursive;
    font-size: 1rem;
    color: red;
}

Open in new window

Browse the fonts, and select any you want to use. It will then give you the link to the stylesheet which you just paste into your <head> and it will also give you the rules you need in your own stylesheets.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.