Coder Perfect

On an HTML site, how can I install a custom font?

Category: html

Tag: , , ,

Problem

I’m not working with Flash or PHP, and I’ve been asked to add a custom font to a basic HTML layout. “KG June Bug” is a song written by KG.

I have it locally downloaded; is there a simple CSS trick that I can use to accomplish this?

Asked by adam

Solution #1

Yes, you can utilize the @font-face CSS property. It was only officially authorized in CSS3, however it was proposed and implemented in CSS2 and has long been supported in Internet Explorer.

This is how you declare it in CSS:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Then you can simply refer to it as you would any other standard font:

 h3 { font-family: Delicious, sans-serif; }

As a result, in this example,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

You only need to place the JUNEBUG.TFF file in the same directory as the html file.

I got the font from the website dafont.com:

http://www.dafont.com/junebug.font

Answered by Nicolas Modrzyk

Solution #2

Most current browsers support @font-face.

Here are several articles that explain how it works:

Here is a good syntax for adding the font to your app:

Here are some resources for converting fonts for @font-face use:

If you don’t want to use font-face, you can use cufon, which has comprehensive instructions on its website:

Answered by nheinrich

Solution #3

Your CSS code should look like this for the best browser support:

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

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

For additional information, visit CSS-page tricks.com’s Using @font-face.

Answered by John Slegers

Solution #4

Try this

vilis.org

Answered by SIAMWEBSITE

Solution #5

If you’re using a third-party style sheet, your code might look like this:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

And it should be saved in its own.css file (eg styles.css). The actual font file should have the same path as the.css file, NOT the.html or.php web page file, if your.css file is in a location different from the page code. The web page should then include something like:

<link rel="stylesheet" href="css/styles.css">

in the html page’s head> section The font file, as well as the stylesheet, should be placed in the css folder in this case. To use Junebug font in any element, simply put the class=”junebug” inside any tag in your html.

Add the style tag to the head of the html if you’re placing the css on the real web page:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

And the actual element style can either be declared inline with the element or included in the aforementioned style> and called per element by class or id. By element, I mean div>, p>, h1>, or any other html element that requires the Junebug font. The font file (Junebug.ttf) should be in the same directory as the html page in both of these cases. The optimal practice among these two alternatives would be:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

and

<h1 class="junebug">This is Junebug</h1>

Then there’s the least acceptable option:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

and

<h1 style="font-family: Junebug;">This is Junebug</h1>

Inline styles should not be used since best practice recommends that styles should be stored together in one location to make editing easier. This is also why I propose utilizing the first option, which is to use external style sheets. I hope this information is useful.

Answered by Richard Stitz

Post is based on https://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site