How to Include Custom Font Using CSS to Make It Compatible with Maximum Browsers

What is the best way to include custom font using CSS to make it compatible with maximum browsers?

Here is the css i use to embed my font in every browser, hope that helps:

@font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
     url('fonts/abc-font.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */
}

Also note, that you can set your font family without quote, like this:

h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }

You can learn about font browser support here.

fontsquirrel is probably the best place to generate every font format you need.

This article explain how to find your font ID to add after the hashtag for the SVG font.

If someone is asking why is there ?#iefix for IE6-IE8 browsers eot font, see this answer.

@font-face - how to make it work on all browsers

Firstly, you don't have the copyright to embed most fonts - anyone can download them, so it's no different to putting the font on your server for someone to download.

My advice would be to use the font squirrel tool found here: http://www.fontsquirrel.com/fontface/generator to generate the files and the code for you.

Be careful not to share fonts you don't have the rights to do so with.

Custom font different across browsers (Safari/Chrome/Firefox)

The font size is the same, but your letters in Chrome are bolder than in Firefox. That's because you are importing your fonts wrong.

Currently you are using:

@font-face {
  font-family: "Cobury Regular";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cobury Bold";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

... {
  font-family: "Cobury Regular";
}
... {
  font-family: "Cobury Bold";
}

But the correct way would be:

@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

... {
  font-family: "Cobury";
  font-weight: normal;
}
... {
  font-family: "Cobury";
  font-weight: bold;
}

Always use font with their actual font-weight. Don't treat the same font with different weight and style like different fonts.

Your .woff font files have implemented meta tags inside, which telling the browser what thickness the letters have. If the provided font-weight in the import statement @font-face doesn't match with that, browsers will treat that differently, because there is no standard for that. (Chrome tries to handle the situation by adding a additional thickness to the already bold font, for whatever reason.)

Edit:
I'm seeing that you use h1, .text-logo #logo { font-weight: 900; ... in your CSS but you have never defined the font with the weight number 900. Please use only the weights you have provided via @font-face. (With my suggestion it would be normal and bold)

Font/cross-browser compatibility in CSS?

You need different formats of your font for different browsers. You can try http://www.fontsquirrel.com/fontface/generator

In that site they will convert the font in all the proper formats for you. They will also give you a stylesheet sample so you can copy the css already prepared for use cross browser. The other added bonus is that like images and audio fonts can be compressed. Their tool can also do this to give you a smaller font.

By the way, when declaring the font face you can also declare the font weight associated with that weight. font-weight:100 could be your regular font, and font-weight:600 could be your medium font. This makes it easier to use the font as you will only have to memorize one name, and simply apply the proper weight, whereever you use your font.

@Font-Face cross browser compatibility issue

You have a comma and a semicolon mixed up. The correct block would be:

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

In CSS is there any need for backup fonts when applying custom fonts to a webpage?

It's not necessary to specify a font stack, but it helps to degrade gracefully in obscure cases when a browser is unable to use the font somehow, e.g. if the HTTP request for the font file times out, the font file itself becomes corrupted or otherwise unusable, the browser doesn't support any of the given font formats, among others.

You should do your best to ensure the custom font gets downloaded and used properly, of course. But things can and do happen that are out of your control sometimes, so it doesn't hurt to still have something nice to fall back to. That's why they're called backup or fallback fonts :)

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>