Non-Standard Fonts in Web

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/

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

Are non-standard fonts in HTML a bad idea?

No. Even if the included font (be it through @font-face, stylesheet rel, JS etc.) fails to be downloaded/included when the CSS is interpreted and the page is rendered, the fallback will be applied. The fallback, being a web safe font (like Arial) means text will still be displayed.

For example:

* {
   font-family: "Included Special Font", "Arial", sans-serif;
   /*            ^ Primary               ^ Fallback 1 ^ Fallback 2 */
}

Here is a list of web safe fonts for your reference.

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.

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 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 to include a non-standard font-face in azure hosted website without using visual studio?

you just have to add a MIME type for the font in your web.config it will look something like this for your woff font

<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".woff" /> 
            <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
         </staticContent>
    </system.webServer>
</configuration>

IIS by default will prevent download of static files you don't specify MIME types for.

Edit: added <remove fileExtension=".woff" /> based on @TealFawn suggestion

Non-Standard Fonts in Web