given Toms post Use TTF in Lovelace I think it should be doable. Seems yaml mode would be the most suitable mode to be able to do all of these customized things.
I mean, I have the css file (no need to convert?). I could try to create that loadfonts.js file, maybe like this:
function loadcss() {
let css = '/local/material/materialdesignicons.min.css'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
edit:
forget the above, cleaned things up and
created fonts.css:
@font-face {
font-family: "Material Design Icons";
src: url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.eot?v=5.8.55");
src: url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.eot?#iefix&v=5.8.55") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.woff2?v=5.8.55") format("woff2"), url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.woff?v=5.8.55") format("woff"), url("https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.ttf?v=5.8.55") format("truetype");
font-weight: normal;
font-style: normal;
}
and loadfonts.js:
function loadcss() {
let css = '/local/material/fonts.css?v=0.005'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
and added to resources.yaml:
- url: /local/material/loadfonts.js
type: module
which is, I believe following your remarks here and Toms post to the letter.
loaded alright:
this is the icon_template:
ch_weather_icon:
value_template: >
{% set mapper_icon =
{'partly-cloudy-night':'F31'} %}
{% set mapper_br =
{'pouring':'596',
'lightning-rainy':'67E',
'snowy-rainy':'67F'} %}
{% set mapper_ds =
{'sunny':'599',
'clear-night':'594',
'partlycloudy':'595',
'rainy':'597',
'snowy':'598',
'snowy-rainy':'67F',
'windy':'59D',
'fog':'591',
'cloudy':'590',
'hail':'AC1',
'lightning':'593'}%}
{% set icon = states('sensor.dark_sky_forecast_icon') %}
{% set buienradar = states('weather.buienradar') %}
{% set dark = states('weather.dark_sky') %}
{% set weather = mapper_icon[icon] if icon in mapper_icon else
mapper_br[buienradar] if buienradar in mapper_br else
mapper_ds[dark] if dark in mapper_ds
else 'F37' %}
\\F0{{weather}}
Still no such luck yet:
