Cross Browser @Font-Face Use

@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.

Cross browser @font-face use

Try it like this:

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

Otherwise, open the .TTF file on your computer. If it already appears bold, the font WILL NOT be able to be decreased in size because that's the normal look for the 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;
}

What are cross-browser, cross platfom web safe fonts?

You cannot guarantee the fonts that will be used on a mobile device the same way you can guarantee which fonts are available on a normal computer.

A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, e.g.

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */

font-face not working on all browsers

I see the answer, you're calling the font-family incorrectly. Make sure to use the @font-face font-family declaration. In this case, use 'robotoblack' instead of 'roboto-black'. And use quotes in your css when calling the fonts.

I also recommend calling @font-face first then call those font-families in the css after.

Custom font face not requested by browsers

It was all to !important at the end of font-family definition. I removed it and everything worked!

It's strange that if !important is not a part of the font-face and actually breaks its functionality, how come my IDE (Pycharm) didn't even trigger a warning.

Cross browser font sizing

Font sizes are the same in both Firefox and Chrome.

Here is what it looks like in both browsers:

As you can see both browsers compute the font size as 93.75px.

After few adjustments:

h1 {
    background-clip: padding-box;
    border: 20px double #fff;
    color: #fff;
    display: inline-block;
    font-size: 10em;
    left: 50%;
    padding: 20px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 10%;
    transform: translateX(-50%);
}
.intro p {
    color: #fff;
    font-size: 5em;
    padding: 50px;
    position: absolute;
    text-align: justify;
    top: 40%;
}
table {
    bottom: 10%;
    color: #000;
    font-size: 3em;
    margin-left: 150px;
    position: absolute;
}

Adding fonts to HTML/CSS code for website users (cross-browser)

Firstly, websites need not look alike in all the browsers (http://dowebsitesneedtolookexactlythesameineverybrowser.com/). It is perfectly fine to not display these fonts in the older browsers. Just provide a fallback as @ThiefMaster mentioned.

In case , you insist on using the same fonts even for older browsers, you might have to rely on Cufon (http://cufon.shoqolate.com) for cross browser compatibility. Use a feature detection (using Modernizr) and conditionally load the Cufon library. Be warned that using Cufon on body text would make the page load slower.

PS: All IE versions support web font embedding.

---

Related Topics