Xibo Custom Font Android Device

Get Help
1

Hi All! I have a lower version of Xibo on the servers (1.7.1) and do not want to updat ethem at the moment.
The Clients on each android-pc is updated (1.8.6 I believe?)
I am trying to use the font-type ‘Archer’ within datasets [in layouts]. I have css saying
table.DataSetTable {
font-size: 40px;
font-family: ‘Archer’;
src: url(‘Archer-Bold-Pro.otf’);
font-weight: bold;
color:#FFFFFF;
text-align: left;
}

That being said, it can’t find the “src: url(…)” in the css so it does not load the Archer font.
It is uploaded in XIBO under media. I have the ID number and all.

Is there any way I can get this font to load on Chrome for all clients?
These are Android clients. If it cannot be done through Xibo, how do I add the font to each Android device (what directory do I put them in?)
Any help is greatly appreciated.

2

I can’t remember off the top of my head if 1.7 has custom fonts, but if it does, then all you need to do is upload your font to the media library, and then edit and save it.

Then the Players will receive a copy of the font file, and the font itself will show up in any of the HTML widget editors as an option.

3

I am not so sure if 1.7 has custom fonts either. I think the version i’m at should, but i’m using a dataset so you can’t just select the font. it has to be done through CSS. Where i write the src line and the font-family. On the android PC it won’t find either and goes to it’s default font which I believe may be Arial or Times. So then when the layout is selected, it displays the default font rather than the custom font. I have the custom font uploaded under ‘Media’ in Xibo. Is there something I may be doing wrong?

4

If you have the font file uploaded to Media, and then have assigned the file to the Player on the Displays page (assuming you can do that in 1.7 - I don’t recall now I’m afraid), then it will be transferred to the Player library as it’s media ID, not as the name you uploaded it.

So 20.otf for example. You can see the MediaID on the Media page. You would therefore need to reference that file name in your code, not Archer-Bold-Pro.otf.

This also assumes that the font file you have is suitable for embedding. The 1.8 CMS checks that for you at upload, but I don’t think 1.7 does.

5

I do have the font uploaded. i have tried it as
src: url(“512.otf”);
it has not worked, even tried adding format(“opentype”);
to it and that has not worked either. src is not a property type for where i’m adding it from what developer tools says (adding it to table.DataSetTable).
Is there another way I should be referencing the ‘src’ property? (my src is in Media as we talked about earlier, ID is 512).

Also, is there a database change going from 1.7 to 1.8?
May just update the CMS. Would we be able to easily go from 1.7 to 1.8 without touching the database.

6

There are a lot of database changes between the two versions.

I’ve you’ve uploaded the item as a font in your Library your player and layout designer will already be receiving a font.css file containing the correct definition for that font. You then only need to reference it in your CSS by name - i.e. font-family: 'Archer'; and nothing else.

You can get the fonts.css file out using developer tools (to see what is inside it) - although it will be slightly different between the CMS and Player - the Player will reference the font file locally.

7

Thank you for the response.
As far as database changes go, is there somewhere you can link me to with the changes in versions? A reference page if possible.

For the custom fonts, I do not see a fonts.css file being compiled for me to see. The way I worked around this is by going through each object/dataset and styling the css with the custom font, in our case ‘Archer’, base_64 encoded.
Something like:

@font-face { font-family: 'Archer'; src: url('*Archer base_64 encoded*') format('woff'); }

This allowed us to reference the code in CSS by name as you referred to @dan.
If there is a way for us to manually generate the fonts.css and put this styling in there, that would be preferable so we do not need to include this CSS for every layout dataset.

8

The release notes offer a high level overview of what changed in each release - https://xibo.org.uk/manual/en/release_notes.html

Otherwise you have a full code history available on GitHub so you can see exactly what has changed. 1.7 to 1.8 was a big jump (nearly 2 years in development), the exact database steps can be seen in the install/steps folder - items 120 to 135 https://github.com/xibosignage/xibo-cms/tree/develop/install/steps

If you can’t find fonts.css in your library folder, then this is certainly the problem. Are you absolutely sure you’ve uploaded it as a font in the Library?

What you could do (which is a bit hacky, but might work) is to put that styling in the client.css file, which can be found in theme/default/css/client.css - this file is included on every widget automatically.