sourcing fonts in css

Question

So I'm having trouble getting fonts to source properly. I have in my public_html, index.php which uses the stylesheet stored in a folder one directory higher than the html, accessing it through subdomain.

Everything is working except the fonts. The fonts are stored in the same webroot as the stylesheet, except one folder down, in fonts

Should I be sourcing them with an absolute URL or is there something wrong with my css?

EDIT: I have a background image that is using url() in css working the same way, and it functions just fine.

body {
  background: url('img/bg.png') no-repeat center center fixed;
  font-family: typewriter;
}

/* -- FONT DEFINITIONS -- */
@font-face {
  font-family: code;
  src: url('font/code.ttf') format('truetype');
}

l33tContainer .font1 {
  font-family: code;
}

@font-face {
  font-family: typewriter;
  src: url('font/typewriter.ttf') format('truetype');
}

l33tContainer .font2 {
  font-family: typewriter;
}
/* END FONT DEFINITIONS */

The most likely problem is your `l33tContainer` selector -- did you create a [**custom element**](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) with this name, or did you mean to use an ID or class selector? Could you please add your relevant HTML to confirm the selector, thus forming a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve)? — Obsidian Age, Apr 19 '18 at 21:39
Whoops, let me add in that `font-family: typewriter;` is defined in the body of `index.php`, `l33tContainer` is a custom element. — Ronald LaPlante, Apr 19 '18 at 21:43
Awesome; what does the HTML look like? Unless you have `
Text
` your selector is targeting the wrong element. — Obsidian Age, Apr 19 '18 at 21:44
Yes, I am assigning the font to elements with the classes font1,font2..etc... inside of l33tContainer, but I assign the fonts to the index with body, and it is not working there. — Ronald LaPlante, Apr 19 '18 at 21:48

score 0 · Answer 1 · answered Apr 19 '18 at 21:42

0

Could you try like this

@font-face {
font-family: typewriter;
src: url('../font/typewriter.ttf') format('truetype');
}

and make sure "l33tContainer" has class(.), or id(#) it must be .l33tContainer or #l33tContainer

answered Apr 19 '18 at 21:42

this does not work. it should work just fine the way I have it I would assume. this exact code worked fine when it was stored in the same directory as the files that call it. is the url sourcing for the fonts in relation to the css file or the file referencing it? I have a background image that references the same way, and it is working. this is just the fonts – Ronald LaPlante Apr 19 '18 at 23:18

score 0 · Accepted Answer · answered Apr 20 '18 at 01:28

I found a solution that helped me.

Adding this to your .htaccess subdomain directory that is holding your fonts fixes this issue.

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Original StackOverflow Post

sourcing fonts in css

2 Answers2