Using Custom Fonts Using Css

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

Not able to use this custom font in css

Here is the code of CSS. if you need any help please let me know. and also add the font folder to your path. Hope it will work.

@font-face {
font-family: 'Conv_Megatron';
src: url('fonts/Megatron.eot');
src: local('☺'), url('fonts/Megatron.woff') format('woff'), url('fonts/Megatron.ttf') format('truetype'), url('fonts/Megatron.svg') format('svg');
font-weight: normal;
font-style: normal;

}

.demo
{
    font-family:'Conv_Megatron',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:left;
    border:1px solid #666;
    padding:10px;
}

<div class="demo" style="font-size:25px">
    The quick brown fox jumps over the lazy dog.
</div>

Using Custom font in HTML/CSS

Make a font face:

@font-face {
    font-family: 'Typogrotesk'; /*a name to be used later*/
    src: url('TheURLToTheFontFile'); /*URL to font*/
}

Then to use it in your css styling:

.example {
    font-family: 'Typogrotesk';
}

Credit: @Chris at this link

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.

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

Correctly using custom fonts in separate .css stylesheet

Generally when I need to do this I use the fontsquirrell generator. You need to upload the font you need to use and it will generate an example to use it.

After you generate the font kit you'll get a bundle with several files:

font_name.eot
font_name.svg
font_name.ttf
font_name.woff
font_name.woff2
font_name-demo.html   <-- Open it
stylesheet.css

After you open the .html you'll see your font perfectly working in the sample page. You need to copy all those files (.eot, .svg, .ttf, .woff, .woff2) into your source folder and reference those in your .css (may be you'll need to edit the directory depending on where you put the font files) as the stylesheet.css does:

@font-face {
font-family: 'font_name';
src: url('/relative/path/font_name-webfont.eot');
src: url('/relative/path/font_name-webfont.eot?#iefix') format('embedded-opentype'),
     url('/relative/path/font_name-webfont.woff2') format('woff2'),
     url('/relative/path/font_name-webfont.woff') format('woff'),
     url('/relative/path/font_name-webfont.ttf') format('truetype'),
     url('/relative/path/font_name-webfont.svg#fontnameregular')     format('svg');
font-weight: normal;
font-style: normal;

}

Remember the fonts you are using need to be legally eligible for web embedding.

Hope it helps

How do I install a custom font on an HTML site

Yes, you can use the CSS feature named @font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.

You declare it in the CSS like this:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Then, you can just reference it like the other standard fonts:

 h3 { font-family: Delicious, sans-serif; }

So, in this case,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

And you just need to put the JUNEBUG.TFF in the same location as the html file.

I downloaded the font from the dafont.com website:

http://www.dafont.com/junebug.font

---

Related Topics