Search code examples
htmlcssfont-face

@font-face does not work while fonts in subfolder

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.

Solution

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