How to Add Some Non-Standard Font to a Website

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

Using non-standard font in web pages?

You can use the CSS @font-face declaration for this.

However, beware: not all browsers support the otf format.

You can use a tool such as FontSquirrel's Font-face Generator to convert the font into all the different formats you'll need. It'll even generate the CSS for you, which you'll then simply copy and paste into your project.

Non-Standard fonts in web?

You can use CSS to embed fonts in web-pages.

Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face!

http://www.zenelements.com/blog/css3-embed-font-face/

Using a non-standard font in html

Looks like a path problem. Then HTML file and Font files must be in the same directory. Then try with inline style in HTML first and add some little changes. I think the additional src: after the ; is a must:

<html>
  <head>
    <title>Font Test</title>
    <style>
@font-face {
    font-family: 'Woodbonnet';
    src:url('./WoodBonnet-GrotesqueNo4.eot?#iefix');
    src:url('./WoodBonnet-GrotesqueNo4.eot?#iefix') format('eot'),
        url('./WoodBonnet-GrotesqueNo4.woff2') format('woff2'),
        url('./WoodBonnet-GrotesqueNo4.woff') format('woff'),
        url('./WoodBonnet-GrotesqueNo4.otf') format('opentype'),
        url('./WoodBonnet-GrotesqueNo4.ttf') format('truetype'),
        url('./WoodBonnet-GrotesqueNo4.svg#Woodbonnet') format('svg');
}
    </style>
  </head>
  <body>
    <div class="links">This should be written in the font, but isn't.</div>
  </body>
</html>

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>

How to get non-standard font with effect in use of web site?

To be able to display Titillium font like anyother text, you need to embed the font in the webpage. There are many online services that can help you do that.
Before embedding make sure that the license of the font allows you to embed the font, as few font doesn't allow.

Here is an example for font embedding using CSS3:

@font-face{
    font-family: 'Titillium';
    src: url('Titillium.eot');
    src: local('Titillium'), url('Titillium.ttf') format('truetype'), url('Titillium.woff') format('woff'), url('Titillium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

As you see above there are various formats of same fonts I have put. They are there to be browser compatible eg: eot is supported by Internet Explorer. WOFF is a format soon to be widely accepted by all the browsers.
There are many online converter available for converting a font. You can google it out choose a best one for yourself.

Also font embedding is supported in following browsers:

Mozilla Firefox: version: 3.5+
Google Chrome: version 4.249.4+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 4+

Here is the glow effect I always use in my projects :)

HTML

<span id="glow">Hello World</span>

CSS

#glow{
    font-weight:bold;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(73, 167, 219, 0.5), 0 0 30px rgba(92, 214, 255, 0.7), 0 0 75px rgba(92, 214, 255, 0.8);
}

How do I include this font in my HTML?

You can include fonts into your website by css @font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.

Declare it like

@font-face {
  font-family: john-slim-joe;
  src: url(myFontsFolder/john-slim-joe.ttf);
}

Use it like

p{
  font-family: john-slim-joe;
}

How to Add Some Non-Standard Font to a Website