How to add a new font (no google fonts)

Apps & Services HABPanel
1

Hello,
I uploaded a font on my webspace which I would like to use on my habpanel. I tried this:

@font-face {
	font-family: 'aurebeshregular';
	src: url('https://www.xyz.de/font/aurebesh-webfont.eot');
	src: url('https://www.xyz.de/font/aurebesh-webfont.eot?#iefix') format('embedded-opentype'),
	url('https://www.xyz.de/font/aurebesh-webfont.woff2') format('woff2'),
	url('https://www.xyz.de/font/aurebesh-webfont.woff') format('woff'),
	url('https://www.xyz.de/font/aurebesh-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

<font style="font-family: aurebeshregular">test</font>

Well, it don’t work :smiley: Could someone help me with this? If I need to save the font-files on the raspberry: In which folder do I need to safe them?

Thank you :slight_smile:

2

Put your fonts inside your openhab/conf/html folder and use http://YOUROPENHAB:PORT/static/<fontfilenamehere>

While you’re already there, add a css file in there too. And in advanced setting of HABPanel, add your custom css: http://YOUROPENHAB:PORT/static/yourcustom.css

3

OK well

  @font-face {
	font-family: 'aurebeshregular';
	src: url('/static/aurebesh-webfont.eot');
	src: url('/static/aurebesh-webfont.eot?#iefix') format('embedded-opentype'),
	url('/static/aurebesh-webfont.woff2') format('woff2'),
	url('/static/aurebesh-webfont.woff') format('woff'),
	url('/static/aurebesh-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

Doesnt work :frowning:

4

Where is this style defined? Try absolute path http://…/static/…

5

the style is in the costum widget. I allready tried the absolute path.

6

This is what I did in my CSS and it’s working. I placed the font in the ./html directory

@font-face {
  font-family: "swiss911";
  src: url('swiss911.ttf');
}

div {
  font-family: swiss911 !important;
}

The only problem is, that this font is applied to the entire habpanel structure. Also settings, editing field, etc is affected by the font. Does anyone know the exact class name of the dashboard container?

EDIT: applying the font on class .container makes it a bit better, but the result I was expecting