How to Use Custom Fonts on a Website

How do I install a custom font on an HTML site

Yes, you can use the CSS feature named @font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.

You declare it in the CSS like this:

 @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 just reference it like the other standard fonts:

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

So, in this case,

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

And you just need to put the JUNEBUG.TFF in the same location as the html file.

I downloaded the font from the dafont.com website:

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

How to add some non-standard font to a website?

This could be done via CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).

How do I add custom fonts?

download your font and put in any directory. here i added in fonts directory

   <style>
    @font-face {
        font-family: 'maven_pro_light_300regular';
        src: url('fonts/mavenprolight-300-webfont.eot');
        src: url('fonts/mavenprolight-300-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/mavenprolight-300-webfont.ttf') format('truetype'),
             url('fonts/mavenprolight-300-webfont.woff') format('woff'),
             url('fonts/mavenprolight-300-webfont.svg#maven_pro_light_300regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    </style>

and you can use it by follow example:

<style>
h2{
    font-family:maven_pro_light_300regular; 
}
</style>

Using custom fonts using CSS?

Generically, you can use a custom font using @font-face in your CSS. Here's a very basic example:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}

Then, trivially, to use the font on a specific element:

.classname {
    font-family: 'YourFontName';
}

(.classname is your selector).

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

while also preventing people from having free access to download the font, if possible

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

Adding custom fonts in CSS

Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css folder - it would work.

If you want to go back in folder structure just use ../. It's useful if you want to store images for example in /img and not in /css/img.

@font-face{
    font-family: league_spartanregular;
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Using Custom font in HTML/CSS

Make a font face:

@font-face {
    font-family: 'Typogrotesk'; /*a name to be used later*/
    src: url('TheURLToTheFontFile'); /*URL to font*/
}

Then to use it in your css styling:

.example {
    font-family: 'Typogrotesk';
}

Credit: @Chris at this link

(HTML) How do i use 2 custom fonts in a page?

You have to use CSS to do that. That CSS can embedded in your html under your tag

<html>
  <head>
   <style>
      @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
      @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
      @font-face { font-family: Delicious2; src: url('Delicious2-Roman.otf'); } 
      @font-face { font-family: Delicious2; font-weight: bold; src: url('Delicious-Bold.otf');}
   </style>
   </head>

Then you can reference these fonts in your html

<font face="Delicious">This is some text!</font>

Check these two posts for more details

How do I install a custom font on an HTML site

https://www.w3schools.com/tags/att_font_face.asp

How to Use Custom Fonts on a Website

How do I install a custom font on an HTML site

How to add some non-standard font to a website?

How do I add custom fonts?

Using custom fonts using CSS?

Adding custom fonts in CSS

Using Custom font in HTML/CSS

(HTML) How do i use 2 custom fonts in a page?

Related Topics

Leave a reply