I looked through similar questions and found no answer in any of them. Added to the site font. I added the code from the font-kit to the basic css-file, taking into account my structure:

../src/ β”œβ”€β”€ apps β”œβ”€β”€ base β”œβ”€β”€ common β”‚  β”œβ”€β”€ font β”‚  β”‚  └── open-sans β”‚  β”‚  └── font.ttf β”‚  β”‚  └── font.eot β”‚  β”‚  └── font.woff β”‚  β”œβ”€β”€ static β”‚  β”‚  └── css β”‚  β”‚  └── base.css β”‚  β”œβ”€β”€ templates β”‚  └── views

options @ font-face that you tried

 @font-face { font-family: 'open_sansbold'; src: url('../../font/open-sans/OpenSans-Bold-webfont.eot'); src: url('../../font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('../../font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('../../font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } 

 @font-face { font-family: 'open_sansbold'; src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot'); src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/common/font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('/common/font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('/common/font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; }

But the font does not apply to the element:

 .element__symbol { position: absolute; left: 10px; font: bold 15pt open_sansbold; }

When inspecting the page, it gives open_sansbold, but a serif font is used. enter image description here

UDP Added the structure of the project, it shows where the fonts and the base style file are located.

  • Message from IDE that the font is not supported (font property font-family does not have). I don't understand where I got it wrong - while1pass
  • Is the path correctly written to the font? - Vedenin
  • There are clearly beard paths. ../../ this is below the root list, there is no access there unless of course you are above the two folders above. Better to just insert from the root /font/open-sans/OpenSans-Bold-webfont.eot') - Artem Gorlachev
  • @Vedenin added the structure of the project, yes, he also thought about the ways and tried different options, indicated the question while --pass
  • @ArtemGorlachev added the structure of the project, yes, he also thought about the ways and tried different options, indicated in the question - while1pass

2 answers 2

You have an error in connecting the font, you forgot the quotes:

 @font-face { font-family: 'open_sansbold'; src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot'); src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/common/font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('/common/font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('/common/font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } .element__symbol { position: absolute; left: 10px; font: bold 15pt 'open_sansbold'; }
  • changed nothing - while1pass
  • Then exactly the problem in the paths, http://ваш_Π΄ΠΎΠΌΠ΅Π½/common/font/open-sans/OpenSans-Bold-webfont.eot lies? - Artem Gorlachev
  • does not find the font, for the second option the font-face is such a request: Request URL: 127.0.0.1:8000/common/font/open-sans/OpenSans-Bold-webfont.woff like everything is ok - while1pass

It seems that the font is connected as normal, and the bold spelling is used. Try changing the font-weight to normal for element__symbol.

Check whether the font is loaded in the Network tab. Just keep in mind that if the font is not used on the page, then it will not be loaded, so check first what I wrote above.

  • By the way, yes, it is also a joint, but not the cause of the error. - Artem Gorlachev
  • @ArtemGorlachev on the first remark there is no - while1pass
  • @ArtemGorlachev second yes, does not find the font, for the second variant font-face is such a request: Request URL: 127.0.0.1:8000/common/font/open-sans/OpenSans-Bold-webfont.woff - while1pass