Avatar of breeze351
breeze351
 asked on

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?
CSSPHP

Avatar of undefined
Last Comment
Chris Stanyon

8/22/2022 - Mon
Chris Stanyon

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;
}
Julian Hansen

@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

breeze351

ASKER
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
Your help has saved me hundreds of hours of internet surfing.
fblack61
Chris Stanyon

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

ASKER
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
breeze351

ASKER
Sorry, I hit the enter key.
Font_test.php
Joe_Dir.JPG
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

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.
breeze351

ASKER
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?
Julian Hansen

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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
breeze351

ASKER
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.
Julian Hansen

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

Chris Stanyon

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!)
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
David S.

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.
breeze351

ASKER
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.
ASKER CERTIFIED SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question