@font-face does not work while fonts in subfolder

Question

Currently I'm working on embedding a new font into my page (currently offline). I converted the font into all types with Font Squirrel and added them to the Code of fontspring. Now I would like to order my folders into subfolders so I created a root folder (only the HTMLfile), a CSS Folder and a Font Folder. The Font-Face is embedded in the CSS and try to reach the Fonts out of the Font Folder, but it doesn't work. It just works when I put the CSS, HTML and all the Fonts right into the root Folder. Why? I allready used the relative path method (../font/thefontiwanttouse.ttf). Is there no way to subfolder my Fonts and CSS and still use Fontface? I allready searched the Web but I didn't find anything.

Code in CSS:

body, button, input, select, textarea { font-family: regular, sans-serif; color: #222; }

Code Fontfamily

@font-face {
font-family: 'regular';
src: url('../font/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/pfdindisplaypro-reg-webfont.woff') format('woff'), 
     url('../font/pfdindisplaypro-reg-webfont.ttf')  format('truetype'),
     url('../font/pfdindisplaypro-reg-webfont.svg#svgFontName') format('svg');}

Greetings Terba.

Answer 1

The solution is to put a css file within the folder that the font file is stored in, like this

[your directory]/font/OpenSans/OpenSans.css

In that stylesheet, which is in the exact same place as the font you are referencing, the only content should be

@font-face {font-family: 'Open Sans';
        src: url('OpenSans-Regular.ttf');}

In the head of each page, link to that stylesheet as you would any other

<link href='assets/font/OpenSans/OpenSans.css' rel='stylesheet' type='text/css'>

Now you can use this font in any stylesheet used on the page with

font-family:'Open Sans';

Answer 2

The Stylesheets needs to be on the absolute path between your font and the HTML File:

HTML-File: domain.tld/index.html
CSS-File : domain.tld/assets/stylesheets/stylesheet.css
FONT-File: domain.tld/assets/stylesheets/font/pfdindisplaypro-reg-webfont.woff

and then update your Stylesheet to:

Try to put the folder with the fonts inside the folder with your css file!

@font-face {
font-family: 'regular';
src: url('font/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'), 
     url('font/pfdindisplaypro-reg-webfont.woff') format('woff'), 
     url('font/pfdindisplaypro-reg-webfont.ttf')  format('truetype'),
     url('font/pfdindisplaypro-reg-webfont.svg#svgFontName') format('svg');}