I
I
Illia T2019-07-14 12:46:33
css
Illia T, 2019-07-14 12:46:33

Why might a downloaded local font not be applied?

Maybe I'm doing something wrong? I've been fiddling around for a long time, I need the opinion of an outsider.
Fonts are pulled from _fonts.scss

@font-face { 
  font-family: 'FiraSans-Regular'; 
  src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
  src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg'); 
  font-weight: 400; 
}

body p {
  color: red;
  font-family: 'FiraSans-Regular';
  font-size: 24px;
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey delphinpro, 2019-07-19
@illiatovpeko

Error in the presence of two src

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Must be separated by commas
src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
     url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

The two srcs are used to support ancient IE (can't remember which version).
In your case, the svg font is included, which only Safari understands.
As you have already been told in the comments, the svg format should not be used at all.
And try to use specialized services like https://www.fontsquirrel.com/tools/webfont-generator
to prepare fonts. They will generate fonts for you in the required formats and create a css file for connection.

D
Dymok, 2019-07-14
@UnluckySerivelha

1) an error on the way, you can check it in the console
2) you check it in Cyrillic, but it is not in the font, you can check it in Latin letters

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question