CODEWITHSUNDEEP
csshtmlfont-facetruetype
Daniel Foreman
Daniel Foreman

Reputation: 125

@font-face not working css3

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.

Upvotes: 1

Views: 110

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

There are several issues with the code:

  1. 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).
  2. 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.

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

Upvotes: 1

vicente
vicente

Reputation: 2633

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

Upvotes: 1

Akshay
Akshay

Reputation: 14348

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

Upvotes: 0

Related Questions