Implementing @font-face

Post

Posted
Rating:
#6300 (In Topic #1586)
Avatar
Standard member
Terry is in the usergroup ‘Fan in action’
@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?

Last edit: by Chris Graham

Online now: No Back to the top

Post

Posted
Rating:
#6301
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
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.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#6309
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
I decided to try and host the font on a test install and I got this…

Code

downloadable font: bad search range (font-family: "thebanfont" style:normal weight:400 stretch:100 src index:0) source: http://localhost/composr-copy/data_custom/theban.ttf
downloadable font: incorrect entrySelector for table directory (font-family: "thebanfont" style:normal weight:400 stretch:100 src index:0) source: http://localhost/composr-copy/data_custom/theban.ttf
downloadable font: rejected by sanitizer (font-family: "thebanfont" style:normal weight:400 stretch:100 src index:0) source: http://localhost/composr-copy/data_custom/theban.ttf

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.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#6313
Avatar
Standard member
Terry is in the usergroup ‘Fan in action’
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.

 
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Vaiva, MVLipwig, deepu_ms, mytracker

Forum statistics:
  • 1,213 topics, 5,696 posts, 6,852 members
  • Our newest member is trotons
Birthdays:
Back to Top