How do I use @Font-face with an arbitrary font?

Asked

Viewed 3,400 times

5

I wonder how it works @font-face how should I apply it in my code CSS because I want to use a source called Tekton Pro but only use tag font-family:Tekton Pro does not work and would like it to catch up on the browsers: Google Chrome, Mozila and Safari.

After all what should I do and download a file with the sources and put in the project folder and set in my code or just put the url of the sources directly in my code( se sim qual seria o site ).

html5 css3
  • 1

    you can find the answer to that question here http://answall.com/questions/11072/font-face-do-css-instala-a-fonte-no-computador-ou-s%C3%B3-usa-no-site

  • then @Erloncharles I read there but I didn’t understand a thing this font face is a url that I put directly in my css code or is a file that I put in my project folder and Seto it in the code

  • 1

    You import an external source file to your css, name that imported source and use that new external source as if it were native sources.

  • so then I wouldn’t use @font-face anymore and import ???? could make a simulation with that teken pro font

  • @font-face {
font-family: "Nome-da-Fonte";
src: url("caminho da fonte"); /* para IE */
src: local("nome-da-fonte"), url("caminho da fonte") format("opentype");
}

2 answers

2


You can do it two ways:

1 - Own the source locally

Do the download source, save to your project and reference in CSS:

@font-face {
  font-family: "Open Sans";
  src: url("OpenSans.woff");
}

And use the name that is on font-family in the rest of the CSS file.

Remembering that there are free and paid sources. A good site is the Font Squirrel.

2 - Using the Google Fonts

Example of Open Sans

You choose the styles you want and it generates a link. In this link, has the @font-face defined as you chose before. From there, just put this link in the head and use the source normally.

Example:

body {
  font-family: "Open Sans";
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>Texto na fonte Open Sans</h1>

On compatibility

There are several source formats: WOFF, WOFF2, TTF, SVG, EOT, OTF, and not all browsers support all these types. The best way to ensure compatibility with all browsers, is to own the font in all these formats (you can put several url() in the @font-face, one for each file).

If you don’t call IE8-, use WOFF, which has compatibility with IE9+ and major browsers, including mobile.

I believe that the best way is still to leave the responsibility with Google Fonts, because in addition to using cache, usually it ensures compatibility.

1

Must be problem with path.

I made an example using "font online":

Jsfiddle

See if it rolls there in your code.

  • it worked more and normal that it be this tamnho and coreto use in this way

Browser other questions tagged html5 css3

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