We help IT Professionals succeed at work.

How do I add a font to a web site?

breeze351
breeze351 asked
on
122 Views
Last Modified: 2018-10-10
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

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

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;
}
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

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
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

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
CERTIFIED EXPERT
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.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION