Problems with font-face

Question

Problems with font-face

Navigation

#1 by (1 votes)

3

I'm finalizing a site using Twitter-Bootstrap.

I'm using% direct from the style.css and I am pulling @font-face also in style.css , at% / em> and applying directly to font-family . But I'm not getting results ...

Can anyone 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 chisel.ttf file is directly in the CSS folder, it was an attempt to work out the path of the file, but it was not ... < p>

html5 css twitter-bootstrap

asked by anonymous 24.12.2018 / 21:38

1 answer

How to update only one column of the record? How do I use today's date as column heading in MySQL

score 1 · Accepted Answer

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

1) Download the source: Cinzel ;

2) Access the WebFont Generator tool at Font Squirrel ;

3) Go to the source we just downloaded by clicking Upload ;

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

5)ClickDownloadyourkit;

6)AfterextractingtheZIPfilesyoudownloaded,"grab" everything that matters and copy to the project in question. I usually use these files:

7)Inthestylesheet.cssfile,changetheurlbysearchingthesourcefileswithinthefontes/folder:

@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;}

Ofcourseyouhavetomovethefontstothisfolder,except.css,huh!

8)Nowjustlinkthestylesheet.cssfileandenjoyitsglorioussource:

<!DOCTYPEhtml><html><head><title>TutorialFont-faceporLipESprY</title><linkrel="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:

Ifyouwanttodownloadtheprojectready,youareinmy GitHub / LipESprY / sopt-problem-font-face

It's worth remembering that some browsers do not load certain font types. Newer browsers typically do not have this problem. With such a tool, you address these compatibility issues. This is why several types of this same source ( .ttf, .eot, .svg, .woff, .woff2 ) were generated. Problems with fonts really come to an end!

@edit:

There are currently four font 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 across all current and legacy browsers: EOT is only IE-compatible, TTF is partially IE compatible, WOFF offers broader compatibility , but is not available in some older browsers and compatibility with WOFF 2.0 is still being developed in many browsers.

Source: Optimizing Web Fonts by Ilya Grigorik