@font-face not working css3

Question

I'm attempting to get @font-face working with Chrome and Firefox however I'm having no luck.

The code I'm using can be found at http://testing.teachyourselfstuff.com and here

main.css file

@font-face {
    font-family: FamilyName;
    src: url('http://testing.teachyourselfstuff.com/media/3Dumb.ttf');
}

.3DFont {
    font-family: FamilyName, serif;
}

index.html file

<!doctype html>

<html>

    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Daniel Foreman">
        <meta name="description" content="This is my hand coded html5 template.">
        <meta name="generator" content="Bluefish 2.2.5" >
        <meta name="keywords" content="basic, template, html5, css">

        <title>My website</title>

        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="icon" type="image/x-icon" href="favicon.ico" >
        <link rel="author" type="text/plain" href="humans.txt">
    </head>

    <body>

        <p class="3DFont">This is test text.</p>


        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>

</html>

If someone can point me in the right direction I'll be grateful.

You need to use different font types for different browsers, take a look here for more information: http://stackoverflow.com/questions/14287465/font-face-not-loaded/14287894#14287894 — 97ldave, Dec 10 '14 at 14:55

vicente · Answer 1 · 2014-12-10T12:45:18.193

Your CSS identifier (3DFont) can't start with a digit.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

For more information check the CSS specification: http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

A class name can start with a digit. A CSS identifier cannot. Two different things. — Jukka K. Korpela, Dec 10 '14 at 12:38

Jukka K. Korpela · Answer 2 · 2014-12-10T15:43:58.487

There are several issues with the code:

You are using only .ttf format. For cross-browser coverage, you need a few font formats. Use e.g. FontSquirrel to generate them (and the relevant CSS code).
Referring to font resources on another server generally fails, unless the server has been set to allow that. This is why jsfiddles fail here even when everything else is fixed.
A CSS identifier must not start with an (unencoded) digit. You can avoid this by using (consistently) a different class name, or alternatively by using an escape for the digit as defined in CSS specs:

.\33 DFont { font-family: FamilyName, serif; }

With this fixed, it works on browsers that support .ttf fonts as downloadable fonts. This was tested using your live site with CSS locally edited in the browser.

Nice answer. To follow up point number 1 take a look at this for a bit more information: http://stackoverflow.com/questions/15521130/google-warning-resource-interpreted-as-font-but-transferred-with-mime-type-appl/15522254#15522254 ;-) — 97ldave, Dec 10 '14 at 14:43

score 0 · Answer 3 · answered Dec 10 '14 at 12:29

0

I think it is because your p class is starting with a number it is causing you problems change the class of p tag to fonts and it will work i tried it in your site

answered Dec 10 '14 at 12:29

Akshay

14,138
5
46
70

@font-face not working css3

3 Answers3