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.

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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,

Answer 9

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.