CSS - Custom Fonts

Using custom fonts using CSS?

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.

Adding custom fonts in CSS

Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css folder - it would work.

If you want to go back in folder structure just use ../. It's useful if you want to store images for example in /img and not in /css/img.

@font-face{
    font-family: league_spartanregular;
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

How to install custom fonts in css

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.

@font-face{ 
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}

All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

Custom font not displaying with @font-face?

I think the way you write it (i.e. separate src definitions for all the available formats) makes the woff2 format overwrite all the others, so if a browser can't handle woff2, it won't work.

So instead of all those semicolons and repeated src, try it this way:

@font-face {
    font-family: 'Robotica';
     src: url('robotica.eot') format('embedded-opentype'),
          url('robotica.woff') format ('woff'),
          url('robotica.ttf') format ('truetype'),
          url('robotica.otf') format ('opentype'),
          url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

(same/similar for the other font)

EDIT (moved from comment to answer): In addition, you should remove the spaces between format and the subsequent opening parenthesis of the format description (like format('woff') instead of format ('woff').

CSS: How to customize fonts in an email?

Gmail supports only Google Sans and Roboto fonts (and you don't have to load them in unless you want other email clients to use it).

Only some email clients support any web font, namely, Apple Mail and a couple of others: https://www.caniemail.com/features/css-at-font-face/

Don't use !important inline, that may strip the entire style out in some email clients.

Otherwise, what you've done is good (apart from wanting to remove the a3s class). It just doesn't work with Gmail, and in which case I would expand your font-stack to, e.g. font-family: BVP, Roboto, Arial, sans-serif;

Another tip: you can normally remove the /* latin-ext */ section, and not load that font, unless you are using the extended character set (accents and weird stuff).

If you want further help, share your full code.

using custom font in css using zip file in react application

You can load custom fonts using @font-face.

This article shows really well how to do this.

Add the font to your project and reference it inside your .css file to be able to use it.

---

Related Topics