Why doesn't font-face in sass/gulp?

Hello!
There is a problem with fonts in sass (I use gulp, but rather just beginning).
Describe actions:
1) In the folder sass created a separate file font.sass for fonts
2) did @import "font" in main main.sass
3) there was Spectacular fonts
1bb19af85cd14f138dc335321042d4c3.png
4) Compilation is successful:
8382794b28264c768218f604bcf3a8b1.png

But there is a problem: the font does not work. If you connect some kind of Tahoma, it works. Like vera crouz kram and support the Cyrillic alphabet. Should be like this:
07611207bbfd4210bc7e547208b2d444.png
And I have all the standard browserskin font.

Can you please tell what error and where do I go? Thank you all in advance for the help! :)
June 27th 19 at 15:28
2 answers
June 27th 19 at 15:30
Solution
Problem solved: due to syntax errors compilation has happened, but happened nepravilno
@font-face
 font-family: "kram"
 src : url("../fonts/kraM.ttf")
<---the error must be on the same level

@font-face
 font-family: "kram"
 src : url("../fonts/kraM.ttf")
<---so
June 27th 19 at 15:32
different browsers load different font formats.
therefore, you need to generate all (ttf, otf, eot, woff, woff2, svg).

this will help you a similar service https://www.web-font-generator.com/
You do not understand a little :) . I have long known about the generation of all formats and for a donkey and WebKit, but the fact that the fonts don't work even in chrome ttf. - percival_Muell commented on June 27th 19 at 15:35
This is the example I filled in one format - percival_Muell commented on June 27th 19 at 15:38
: OK, but anywhere we can see the source in this case? - Jonathon84 commented on June 27th 19 at 15:41
or throw scompany css - Jonathon84 commented on June 27th 19 at 15:44
sass:
@font-face
 font-family: "vera crouz"
 src : url("../fonts/vera crouz.ttf")

@font-face
 font-family: "kram"
 src : url("../fonts/kraM.ttf")


css (scompany):
@font-face {
 font-family: "vera crouz";
 font-family-src: url("../fonts/vera crouz.ttf"); }

@font-face {
 font-family: "kram";
 font-family-src: url("../fonts/kraM.ttf"); }
}
- percival_Muell commented on June 27th 19 at 15:47
and look in the tab "Network" in devtools browser is trying to get these ttf? - Jonathon84 commented on June 27th 19 at 15:50
Apparently not :(
b17d8edda7d448bda093375b88db4997.png - percival_Muell commented on June 27th 19 at 15:53
: go directly to css and try to generate out the address at which the CSS accesses the font - if the font appears, then the problem is the format, if not - the problem is the file path. - Jonathon84 commented on June 27th 19 at 15:56
ie handles css write:
@font-face{
 font-family: "vera crouz";
 src : url("../fonts/vera crouz.ttf");
}
? - percival_Muell commented on June 27th 19 at 15:59
That's what happened. I ordered this in css, font earned
07d78710a1034b7c87fcef0d16b39f28.png - percival_Muell commented on June 27th 19 at 16:02
: let's say you have opened TSSS at example.com/public/css/index.css

you look at your relative path
url("../fonts/vera crouz.ttf");
and try to go at him for "font"
http://example.com/public/fonts/vera-crouz.ttf

if will open - the problem in a format that will not open - the problem in the way. - Jonathon84 commented on June 27th 19 at 16:05
If you write localhost:3000/app/fonts/vera crouz.ttf
it Cannot GET /app/fonts/vera crouz.ttf

But if localhost:3000/fonts/vera crouz.ttf,
the font file is downloaded :) - percival_Muell commented on June 27th 19 at 16:08
what does it mean? - percival_Muell commented on June 27th 19 at 16:11
: means that a problem in file path, not in SASS - Jonathon84 commented on June 27th 19 at 16:14
I tried to change the path:

src : url('/app/fonts/vera crouz.ttf')

also no change - percival_Muell commented on June 27th 19 at 16:17
: then url('/fonts/vera crouz.ttf')
Not working? - leonor36 commented on June 27th 19 at 16:20
Does not work although I tried various options :( - percival_Muell commented on June 27th 19 at 16:23
the structure of the project is this:
26bc7aade4454e6a90c1518bf5ac88f3.png - percival_Muell commented on June 27th 19 at 16:26
: and dist the fonts there? - Jonathon84 commented on June 27th 19 at 16:29
there's nothing - percival_Muell commented on June 27th 19 at 16:32
well, try to put the fonts in the neighborhood of TSSS and specify without "../" - it should work - Jonathon84 commented on June 27th 19 at 16:35
in what sense to put near TSSS? :) - percival_Muell commented on June 27th 19 at 16:38
I put the fonts inside the css until it works :) - percival_Muell commented on June 27th 19 at 16:41
And nifiga. If you change the sass file, all is lost what for, and the fonts too( - percival_Muell commented on June 27th 19 at 16:44
: let's see what you have going on in gulpfile - Jonathon84 commented on June 27th 19 at 16:47
All the problem is solved. Thank you! - percival_Muell commented on June 27th 19 at 16:50
@font-face
font-family: "kram"
src : url("../fonts/kraM.ttf") <---- must be on the same level - percival_Muell commented on June 27th 19 at 16:53

Find more questions by tags Gulp.jsSass