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

html css fonts font-face

918,429

Solution 1

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

Solution 2

You can add some fonts via Google Web Fonts.

Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).

For example:

In the <head> section:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Then in CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.

Solution 3

The way to go is using the @font-face CSS declaration which allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

Take a look at the following table:

enter image description here

As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn't much different.

Solutions:

1 - Full browser compatibility

This is the method with the deepest support possible right now:

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

2 - Most of the browser

Things are shifting heavily toward WOFF though, so you can probably get away with:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Only the latest browsers

Or even just WOFF.
You then use it like this:

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

References and Further reading:

That's mainly what you need to know about implementing this feature. If you want to research more on the subject I'll encourage to take a look at the following resources. Most of what I put here is extracted from the following

Solution 4

If by non standard font, you mean custom font of a standard format, here's how I do it, and it works for all browsers I've checked so far:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

so you'll just need both the ttf and eot fonts. Some tools available online can make the conversion.

But if you want to attach font in a non standard format (bitmaps etc), I can't help you.

Solution 5

I've found that the easiest way to have non-standard fonts on a website is to use sIFR

It does involve the use of a Flash object that contains the font, but it degrades nicely to standard text / font if Flash is not installed.

The style is set in your CSS, and JavaScript sets up the Flash replacement for your text.

Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).

View more solutions

918,429

Author by

vaske

Software developer, M Sc in Computer Science and Information systems. Specialized for JavaScript(React/NodeJS), JAVA, PHP, Relational databases and NoSQL (mongodb). Like to read about new technologies, NoSQL, Algorithms, Data Mining, Blockchain, optimization and many other things.. Interested in algorithms, semantic web, mobile platforms, architectures and planing, project management, etc...

Updated on July 08, 2022

Comments

vaske almost 2 years

Is there a way to add some custom font on a website without using images, Flash or some other graphics?

For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can't find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?