How do I add a font to a web site?

breeze351
breeze351 used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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;
}
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@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

Author

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
Ensure you’re charging the right price for your IT

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

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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 :)

Author

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

Author

Commented:
Sorry, I hit the enter key.
Font_test.php
Joe_Dir.JPG
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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.

Author

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?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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!)
David S.Consultant & Challenge Subduer
Top Expert 2009

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.

Author

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.
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial