Implementing @font-face

@font-face will allow a site to load and display font's that aren't common and aren't available on the views computer/browser. In this way, you can force a browser to use a particular font.

I can't get this to work, and I'm not sure if it's the font itself that has issues, or if there's somewhere I need to declare the font in Composr.

I have a font called theban.ttf that works in many tests.

In global.css I tried to add this, but it doesn't work.

@font-face
{
    font-family: thebanfont;
    src: url('https://witches.chat/theban.ttf');
}

.shoutbox_message {
    font-family: thebanfont;
}

The default fonts are still available, but not thebanfont, even though Inspection shows .shoutbox_message knows about thebanfont.

I discovered data/fonts and so I created data_custom/fonts and put theban.ttf in there and tried similar variation to the above, but I'm missing something because it's not working. .shoutbox_message is still the default font set.

I discovered themes/default/css/fonts.css so I duplicated that file and created a similar pathway that used my primary theme, then added:

@font-face
{
    font-family: thebanfont;
    src: url('{$BASE_URL;}/data_custom/fonts/theban.ttf');
}

to the file, which is in the same format of the css that identifies other fonts installed.

This could be an issue with the font itself, I suppose, although it works great in other things.

is there anything I'm missing, in order to use an odd font (to actually force a browser to load a specific font like theban.ttf)

I also edited chat.css and tried the same sort of things, as well as variations on loading the font on the @font-face declaration.

is there any sort of mechanism in Composer that I'm neglecting to consider?

This isn't Composr-specific. CSS is CSS, URLs are URLs.

Did you check the browser console for errors?

It could be there's some cross-domain security issue. The font basically has to come from the exact same protocol, port, and domain that the web page is loading from. i.e. if it is a HTTPS website URL, it must load via HTTPS. If it is on foo.com it must load from foo.com not say www.foo.com.

It could be that there is something about the fonts that make them non-websafe, I'm not sure. Typically you'd use WOFF files rather than ttf files, but I believe ttf files can work too.

I decided to try and host the font on a test install and I got this…


I'm not a font expert, so I don't really know what this stuff means.

It is interesting that setting the font in CSS changes the font displayed even with a broken font, but it changes it by falling back to a system default. I would have thought it would fallback to what the next priority of font set in the CSS is.

Yep, that was it! I looked at the problem every way I could think of, and the only thing that it could be was the site stripped it out, which didn't make logical sense, or the font itself was broken in some way. After your reply, the answer had to be a bad font. That's what it turned out to be. I know it's silly, but I think it's pretty neat to have a chat room that uses a special font...especially one that's obscure and takes some translating. I got it working with a different Theban font, and it's pretty neat. I coded it so that only id=1 would use Theban font, so that other people can create chat rooms that use normal fonts.