@ font-face does not work, but fonts in a subfolder

Question

I am currently working on embedding a new font in my page (currently offline). I converted the font to all types with Font Squirrel and added them to the fontspring code. Now I would like to order my folders into subfolders, so I created a root folder (HTML file only), a CSS folder, and a font folder. Font-Face is embedded in CSS and tries to get fonts from the font folder, but it doesn't work. It just works when I put CSS, HTML and all fonts in the root folder. What for? I have already used the relative path method (../font/thefontiwanttouse.ttf). There is no way to attach to the Fonts and CSS folder and use Fontface? I’ve already searched the web, but I haven’t found anything.

CSS Code:

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

Fontfamily Code

 @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');} 

Hi Terba.

Answer 1

The style sheets should 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 placing the font folder 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');} 

Answer 2

The solution is to put the css file in the folder where the font file is stored, for example

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

In this style sheet, which is in the same place as the font you are linking to, the only content should be

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

At the top of every page, connect to this style sheet like 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';