Using custom fonts using CSS?

Question

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.

javascript replacement like cufon

s_p
– s_p

2012-08-27 14:29:46 +00:00
Commented Aug 27, 2012 at 14:29 — s_p
– s_p, Commented Aug 27, 2012 at 14:29
fontsquirrel.com, google.com/webfonts, etc

j08691
– j08691

2012-08-27 14:30:22 +00:00
Commented Aug 27, 2012 at 14:30 — j08691
– j08691, Commented Aug 27, 2012 at 14:30

Community · Accepted Answer · 2025-08-31 20:36:08Z

450

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.

edited Aug 31 at 20:36

CommunityBot

11 silver badge

answered Aug 27, 2012 at 14:39

Chris

27k6 gold badges61 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Radicate Over a year ago

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?

Chris Over a year ago

@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 to automate the process of conversion and rule-generation. And yes, Google Webfonts are free for commercial use (little link for more info).

Pacerier Over a year ago

@Chris, Is omitting the font-style: and font-weight: in your @font-face declaration violating any standards?

CalculatorFeline Over a year ago

To get this to work I had to add format('truetype') between the source URL and the ;.

Billal BEGUERADJ Over a year ago

Hello Chris. Do you know how to use this font? fontsmarket.com/font-download/gothic-821-condensed-bt

|

Serj Sagan · Accepted Answer · 2013-06-18 02:44:06Z

37

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.

answered Jun 18, 2013 at 2:44

Serj Sagan

30.6k17 gold badges159 silver badges190 bronze badges

Comments

akluth · Accepted Answer · 2012-08-27 14:33:02Z

33

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.

answered Aug 27, 2012 at 14:33

akluth

8,5935 gold badges40 silver badges42 bronze badges

Comments

engr.ukairo · Accepted Answer · 2024-06-27 09:06:16Z

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

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

 @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;
  }

Hi Hitesh. May I ask what is the use of #iefix? and this part font-family: 'besom'; !important, the !important is outside the ;?

Eric Robinson · Accepted Answer · 2012-08-27 14:34:04Z

5

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,

answered Aug 27, 2012 at 14:34

Eric Robinson

2,09515 silver badges22 bronze badges

Comments

sergioviniciuss · Accepted Answer · 2012-08-27 15:51:41Z

5

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.

answered Aug 27, 2012 at 15:51

sergioviniciuss

4,7063 gold badges39 silver badges50 bronze badges

Comments

Arnold · Accepted Answer · 2016-03-20 08:59:03Z

3

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');
}

edited Mar 20, 2016 at 8:59

answered Mar 20, 2016 at 8:53

Arnold

312 bronze badges

Comments

NotTschuschl · Accepted Answer · 2020-04-23 18:44:32Z

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

NVRM · Accepted Answer · 2024-09-16 23:01:54Z

We might want to use the system fonts across browsers in an unified way instead.

The issue is fonts have different name across platforms and devices, due to licensing.

The following classes helps to arrange that without installing anything, by defining more font generic families, using the default system fonts and equivalent across different systems.

fonts.addEventListener("change", font => {
  view.className = fonts.value
})

/* === FONT STACKS === 
* https://github.com/system-fonts/modern-font-stacks
*/

.system-ui {
  font-family: system-ui, sans-serif;
}

.transitional {
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
}

.old-style {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}

.humanist {
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}

.geometric-humanist {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}

.classical-humanist {
  font-family: Optima, Candara, 'Noto Sans', sans-serif;
}

.neo-grotesque {
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}

.monospace-slab-serif {
  font-family: 'Nimbus Mono PS', 'Courier New', monospace;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.monospace-code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.industrial {
  font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
}

.rounded-sans {
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
}

@font-face {
  font-family: 'Rockwell';
  src: local('Rockwell');
  ascent-override: 100%;
}

.slab-serif {
  font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
}

.antique {
  font-family: Superclarendon, 'Bookman Old Style', 'Sitka Heading', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
}

.didone {
  font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.handwritten {
  font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
}

<select id="fonts">
  <option value="system-ui">system-ui</option>
  <option value="transitional">transitional</option>
  <option value="old-style">old-style</option>
  <option value="humanist">humanist</option>
  <option value="geometric-humanist">geometric-humanist</option>
  <option value="classical-humanist">classical-humanist</option>
  <option value="neo-grotesque">neo-grotesque</option>
  <option value="monospace-slab-serif">monospace-slab-serif</option>
  <option value="monospace-code">monospace-code</option>
  <option value="industrial">industrial</option>
  <option value="rounded-sans">rounded-sans</option>
  <option value="slab-serif">slab-serif</option>
  <option value="antique">antique</option>
  <option value="didone">didone</option>
  <option value="handwritten">handwritten</option>
</select>


<div id="view" style="font-size: x-large">
The quick brown 🦊 jumps over the lazy 🐶
</div>

Source project: https://github.com/system-fonts/modern-font-stacks

CSS source: https://github.com/system-fonts/modern-font-stacks/blob/74e90ea2cd6d3693a0f0b9c47719f668729ee55f/site/src/_styles.css#L701C1-L772C2

Collectives™ on Stack Overflow

Using custom fonts using CSS?

9 Answers 9

6 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Related