How to Use Webfont with @Font-Face

How to use webfont with @font-face

Hey @Ritesh please try something like this,

@font-face {
   font-family: 'ArnoProBold';
   src: url('resources/fonts/your_file.eot');
   src: url('resources/fonts/fonts?#iefix') format('embedded-opentype'),
        url('resources/fonts/your_file.woff') format('woff'),
        url('resources/fonts/your_file.ttf') format('truetype'),
        url('resources/fonts/your_file.svg#ArnoProBold') format('svg');
   font-weight: normal;
   font-style: normal;
}

and so on.

I hope this helps. :)

To use local font in HTML using font face

I made the following changes and I got the result

Quotation marks for font-family
Using of URL instead of local
Changing of "\" to "/"

Note:
Use of the local css function throws an error in the developer console saying resource is not loaded. See the modified code below.

<!DOCTYPE html><html><head><style>@font-face {    font-family: "myFirstFont";    src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");}
.harlow {    font-family: "myFirstFont";}</style></head><body><div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div><p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p></body></html>

How to load a custom web font face from my server using link href=... format inside the header tags

You can not load a font directly in HTML, you need help of CSS for this. And if you open the google font link you will be able to see how it's done.

https://fonts.googleapis.com/css?family=Roboto:300,400,500

This url is a css file not a font file.
Open it and you will understand how google used @font-face to load the font.

Here is the documentation from mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Add custom font css with @font-face NOT WORKING

So after testing it on my site I have found a few issues:

Your css class for p is not correct.
In the font url list you have comma separeeted insted of semicolumn
I have tried the same steps as you have, and get only woff and woff2 files. (So you need to remove the eot,svg paths from css)

My code fo one example:

<style>
@font-face {
  font-family: 'caviar';
  src: url('font/caviardreams-webfont.woff2') format('woff2');
  src: url('font/caviardreams-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

p{
  font-family:caviar;
    font-weight:normal;
  font-style:normal;
}
</style>

<div>
  <p>Test</p>
</div>

Hope this helps,

How to change font using @font-face on ffonts.net

The formatting of your @font-face is fine; I had a look at your font links and they appear to invalid. My suggestion is to download them locally, then upload to a file-hosting site (like Dropbox) and replace your current font links with those. Here is a tutorial.

If you decide to go with Dropbox, here is an example of what it would look like:

@font-face {
  font-family: 'slimplay';
  src:  url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.woff2') format('woff2'),
        url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.woff') format('woff'),
        url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.ttf') format('truetype');
}

(And your CSS styling can remain unchanged)

Hope this helps

How to use font-weight with font-face fonts?

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

webfonts: @font-face should include font-style and font-weight?

Yes, you should. The font-weight and font-style specify what you consider the font face to be. This means that you can embed a what is designed by an author to be a regular font face, as a bold font face. This also means that when you use such font face, you'd better use font-weight: bold, unless there are no alternatives in which case the user agent will select the font face anyway.

In your case:

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: /* The URL of the resource containing the non-slanted regular font face. */
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: bold; /* or 700 */
    src: /* The URL of the resource containing the non-slanted font face with 'bold'/700 glyphs. */
}

If you don't specify font-weight in your @font-face rule, your font face is assumed by user agent to have glyphs with the default weight of 400 ("regular"). Consequently, not specifying font-weight in rules that reference your font face, still defaults to same font weight, and everything is fine, there is no conflict.

I also frequently use numeric font weights, because all too often custom fonts are divided into semi-bold and extra-bold gradations, so having something like font-weight: 600 lets you select an embedded semi-bold font face (which also has font-weight: 600 in its corresponding @font-face rule).

Browser cannot get woff font file using @font-face

There are a couple of solutions that could be potential fixes, depends on how you handle your CSS files.

If you have the roboto-v29-latin-regular.woff file inside fonts folder, it means that CSS tries to find the path in the local directory. To find something in the local directory use dot in front of the slash ( ./ ). So if we have the following directory:

/fonts
 -roboto-v29-latin-regular.woff
styles.css

Then the path for roboto-v29-latin-regular.woff would be ./fonts/roboto-v29-latin-regular.woff and it would result in the following font-face:

@font-face {
  font-family: Roboto;
  src: url(./fonts/roboto-v29-latin-regular.woff);
}

This is how you can easily access local or directories above the current level you are on. Read this.

However if you process CSS differently, you have to provide only one / in front of the fonts folder which would result from font fetching from the local instance server URL:

/* Imagine your URL to be: http://localhost:3000/fonts/roboto-v29-latin-regular.woff */

@font-face {
  font-family: Roboto;
  src: url(/fonts/roboto-v29-latin-regular.woff);
}

Again if none of the solutions above work just place the font external URL ( from google fonts etc. )


@font-face {
  font-family: Roboto;
  src: url(<EXTERNAL_URL>);
}

How to Use Webfont with @Font-Face