Correct application of the font-face

Asked

Viewed 80 times

0

It is known that the sources of the type woff and woff2 are not supported by all browsers, I am using on my page and on the google console Chrome accuses problems to download the font type woff2, in Mozilla the kind .woff.

Could someone please tell me how to use these custom fonts without these types of errors appearing on the console? The ideal is to use only TTF and EOT.

Example of Chrome error:

Failed to load Resource: the server responded with a status of 404 (Not Found)

But the source is in the correct directory.

html css css3 css-font-face

  • That mistake 404 Not Found is in the file location and not in the support, probably vc pointed the relative path in the wrong way. Put the full path like this url(http://site/fonts/fonte.woff2) for example and test.

  • Cool William, I’ll try!

  • I don’t know if it’s your case, but if you’ve built your class like this it won’t work either: .className { @font-face { font-family: Helvetica; url(Helvetica.woff); } }

  • it didn’t work, my css is in the dist/styles/fonts.css folder and the fonts in the dist/fonts folder, I tried several paths but it doesn’t work.

  • hugocsl you have any suggestions?

1 answer

0

I searched and found the solution, woff2 and Woff fonts should always come before the others in the stylesheet.

  • This does not explain the 404 error and the question of the order should be for reasons of support vs retro-compatibility, I think you’d better quote, sources because not everything we read is actually correct on blogs and the like. If you can tell us where you got this from, maybe we can find something more technical for the information.

  • 1

    Munir vc have to write your CSS in order of the things you want to call first. Se vc colocar por ex. the TTF font in the first line if your browser supports TTF format it will be the loaded source and the other formats are as fallback. As soon as you want the WOFF2 format it has to be the first option on src: url I could tell?

  • that same hugocs! , that’s what I did, thank you all

Browser other questions tagged html css css3 css-font-face

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