How to add custom webfonts in SoraArticle?

I tryed to add this code below directly in /soraarticle/css/style.css file, but it broke the paragraph structure it truncated all the text together. I tryed to fix the problem by adding <br><br> directly in blog posts but it was also bad idea :) Any suggestions?

customfont{
font-family: 'x_regular';
src: url('x-webfont.eot');
src: url('x-webfont.eot?#iefix') format('embedded-opentype'),
url('x-webfont.woff2') format('woff2'),
url('x-webfont.woff') format('woff'),
url('x-webfont.ttf') format('truetype'),
url('x-webfont.svg#x_regular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'x_regular';
src: url('x-webfont.eot');
src: url('x-webfont.eot?#iefix') format('embedded-opentype'),
url('x-webfont.woff2') format('woff2'),
url('x-webfont.woff') format('woff'),
url('x-webfont.ttf') format('truetype'),
url('x-webfont.svg#x_regular') format('svg');
font-weight: normal;
font-style: normal;

}

style.css is a correct place to add code above. Maybe you added it to wrong place. It has to be added after "}" <- after closing bracket. Where did you place your font in grav theme ?

The font files are located same folder where style.css and they work, but it will break the paragraph structure.

It's weird that there is no documentation or forum posts how to add fonts.

It might be the problem with line breaks or paragraph css overrides. Can you show me a screenshot or actual page where this issue occurs ?