205

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).

And they support a nice amount of browsers.

How does one do that? While also preventing people from having free access to download the font, if possible.

Boann
  • 48,794
  • 16
  • 117
  • 146
Radicate
  • 2,934
  • 6
  • 26
  • 35

8 Answers8

419

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.

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Chris
  • 26,544
  • 5
  • 58
  • 71
  • Thank you for the great detailed answer. May I ask if that kind of approach works for the older browsers as well? Such as.. IE8/7/6? And by the way, are all of the fonts displayed on Google Webfonts free for commercial use? – Radicate Aug 27 '12 at 15:24
  • 1
    @Don `@font-face` works with all reasonably-new browsers, but you need to have the right formats; that's why I recommended using [fontsquirrel.com](http://fontsquirrel.com) to automate the process of conversion and rule-generation. And yes, Google Webfonts are free for commercial use ([little link for more info](https://www.google.com/webfonts#AboutPlace:about)). – Chris Aug 27 '12 at 15:28
  • @Chris, Is omitting the `font-style:` and `font-weight:` in your `@font-face` declaration violating any standards? – Pacerier May 07 '14 at 03:20
  • 1
    To get this to work I had to add `format('truetype')` between the source URL and the `;`. – CalculatorFeline Sep 02 '17 at 23:20
  • Hello Chris. Do you know how to use this font? https://www.fontsmarket.com/font-download/gothic-821-condensed-bt – Billal Begueradj Sep 25 '18 at 15:01
  • Tell them that the font file needs to be placed in the directory where the CSS file is :) – Yan King Yin Dec 07 '18 at 10:08
35

To make sure that your font is cross-browser compatible, make sure that you use this syntax:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Taken from here.

Serj Sagan
  • 28,927
  • 17
  • 154
  • 183
29

You have to download the font file and load it in your CSS.

F.e. I'm using the Yanone Kaffeesatz font in my Web Application.

I load and use it via 

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

in my stylesheet.

akluth
  • 8,393
  • 5
  • 38
  • 42
18

Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.

Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:

  • EOT is IE only,
  • TTF has partial IE support,
  • WOFF enjoys the widest support but is not available in some older browsers
  • WOFF 2.0 support is a work in progress for many browsers.

If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
Hitesh Sahu
  • 41,955
  • 17
  • 205
  • 154
  • 1
    Hi Hitesh. May I ask what is the use of `#iefix`? and this part `font-family: 'besom'; !important`, the `!important` is outside the `;`? – Blues Clues Jun 04 '18 at 01:23
4

If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.

here's a nice tutorial: Make your own font face web font kit

Although im not sure about preventing someone from downloading your font.

Hope this helps,

Eric Robinson
  • 2,025
  • 14
  • 22
4

there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
1

I am working on Win 8, use this code. It works for IE and FF, Opera, etc. What I understood are : woff font is light et common on Google fonts.

Go here to convert your ttf font to woff before.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
Arnold
  • 11
  • 2
0

First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months. And it makes no sense to prevent people from using fonts. A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.

But if you want to implement a font into your website read this: There is a pretty simple and free way to implement fonts into your website. I would recommend Google fonts because it is free and easy to use. For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers) This is how it would look like: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}
NotTschuschl
  • 85
  • 1
  • 11