Problems with the font-face

Question

Problems with the font-face

Asked 5 years, 11 months ago

Viewed 338 times

3

I’m finalizing a website using Twitter-Bootstrap.

I’m using the @font-face right in the css style. and I’m pulling the font-family also in the css style., in div footer and applying directly to <p>. But I’m not getting any results...

Can someone tell me what’s wrong?

@font-face{
    font-family: 'Cinzel';
    src: url('cinzel.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Footer */

footer{
    float:left;
    width:100%;
    background:#212121;
    color:#fff;
    margin:0;
    padding:40px 0 0 0;
}
footer .p{
    font-family: 'Cinzel';
}

Yes, the file cinzel.ttf is directly in the folder CSS, was a solution attempt to be the file path, but it was not...

1

@face-font should be @font-face, right?

– LipESprY

2018/12/24 at 20:50
1

Sorry, it was a mistake at the time I was typing here and then everything was distorted, were it not for your analysis or would have seen rsrs, thanks. But, there in css is correct

– Daniel

2018/12/24 at 20:51
1

Ahh yes. I will help you by formulating an answer. Hence I ignore this "little mistake". ;D

– LipESprY

2018/12/24 at 20:51

1 answer

Browser other questions tagged css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by LipESprY • **4,525** points · Answer 1 · 2018-12-24T21:18:06+00:00

To solve your problem once and for all, I’ll introduce you to an excellent tool!

1) Download the source in question: Chisel;

2) Access the tool Webfont Generator on the website Font Squirrel;

3) Upload the source we just downloaded by clicking on Upload;

4) Check "Expert" and set the following options:

5) Click on Download your kit;

6) After extracting the files from ZIP downloaded, "pick up" everything that matters and copy to the project in question. I usually use these files:

7) In the archive stylesheet.css, alter the url searching the source files inside the folder fontes/:

@font-face {
    font-family: 'cinzelregular';
    src: url('fontes/cinzel.regular-webfont.eot');
    src: url('fontes/cinzel.regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontes/cinzel.regular-webfont.woff2') format('woff2'),
         url('fontes/cinzel.regular-webfont.woff') format('woff'),
         url('fontes/cinzel.regular-webfont.ttf') format('truetype'),
         url('fontes/cinzel.regular-webfont.svg#cinzelregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Of course you have to move the fonts to this folder except the .css, heim!

8) Now it’s just link the file stylesheet.css and enjoy its glorious source:

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Font-face por LipESprY</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <style type="text/css">
            .cinzel {
                font-family: 'cinzelregular';
            }
        </style>
    </head>
    <body>
        <p>Um texto normal</p>
        <p class="cinzel">Um texto com a fonte Cinzel-regular</p>
    </body>
</html>

RESULT:

In case you want to download the project ready, is in my Github/Lipespry/sopt-problema-font-face

It is worth remembering that some browsers do not carry certain types of fonts. Newer browsers usually do not go through this problem. With such a tool, you solve these compatibility problems. That is why several types of this same source were generated (.ttf, . eot, . svg, . Woff, . woff2). Problems with sources really end for good!

@Edit:

There are currently four source container formats used on the Web: EOT, TTF, WOFF and WOFF2. Unfortunately, despite the wide variety of options, there is not a single universal format that works on all current and old browsers: EOT is compatible only with IE, TTF is partially compatible with IE, WOFF offers the widest compatibility, but is not available in some older browsers and WOFF 2.0 compatibility is still being developed in many browsers.

Source: Optimization of web fonts for Ilya Grigorik