I’m not an expert on web fonts, but I suspect safari just can’t find the font.
You could try changing the fontname to one that you’ve got installed on your Mac (or I think generic terms like “times” or “serif” work too). Or copy a font into your HA www folder and change the fontface config to point to it.
If you google “html font face” there’s loads of info/examples out there.
that’s what I was suspecting too. I’ll try the fontface method and put a font in the www folder.
It works! Thanks 
Tested and it works. Thanks!
Brilliant! Thanks for the implementation. I’m not much for complementary colors (so ignore my choice of colors), but at least now we can see at a glance who is where.
edit: Wife just veto’d my choice of color.
Is there a font size setting? My zones are overlapping.
Not at the moment… You might be able to set it in the fontface setting, but I’m not sure. If you can’t then I’ll have a look at adding a setting 
So if I use gmap location sharing there is no way to have it show “travelling”?
Is there a way to add a background image?
Just installed this, and generally loving it. It’s a shame it seems to have gone dark a couple years ago. To echo a couple others, my wishlist would include:
Wish I had the programming skills to modify it myself. 
Yes, me too! JavaScript is horrible and it took me a lot of effort to get this working, the code is not exactly elegant 
I might have another look at it at some point as most of those things are on my wish list too (I’m still using it), but if anyone with superior JavaScript skills wants to improve it feel free!
I’m probably just a thick n00b, but….
It seems custom-updater is deprecated.
I just can’t figure out where to put the weasley card now and how to add it to a dashboard.
I found some reference to ui-lovelace-card.yaml and ui-lovelace.yaml but those do not exist on my HA yellow
Can anyone point me in the right direction?
I have weasley-card.js and weaslyconfig.txt under /config/www/custom-lovelace.
I created the “custom-lovelace” folder myself under www and put the font and js file in there. I needed to ensure I set it to truetype rather than opentype because that was the only downloadable Blackadder font I could find. The way to add the resources has changed in HA, which means instead of performing step 2 in the installation you need to go to Settings->Dashboards and then click the vertical ellipsis in the top right corner where you’ll find “resources” an option - go in there and add the URL from step 2 as a Javascript module.
Thought I would add my solution to this as I never got this version to work.
Mine is a bit hacky but it works. NB If the “hand” is outside the clock face then they are in a place i have not set up a condition for.
Using a little MS paint and PowerPoint I made three pictures. The clock face (Weasley clock.png), and 2 Clock hands with Cartonified faces as png files (E%20clock%20hand3.png and A%20clock%20hand3.png) and uploaded them to the “/local/images/” folder.
Then using a combination of:
I made my version which, while a work in progress, does work.
It rotates the “hands” of the “clock” to pont at a location name based off the zones i have set up in home assistant.
type: picture-elements
card_mod:
style: |
ha-card {
--my-transform-style: {{states('sensor.locationclocka')}};
--my-transform-style2: {{states('sensor.locationclocke')}};
}
elements:
- type: image
image: /local/images/A%20clock%20hand3.png
style:
top: 100%
left: 85%
transform: var(--my-transform-style)
- type: image
image: /local/images/E%20clock%20hand3.png
style:
top: 100%
left: 85%
transform: var(--my-transform-style2)
image: /local/images/Weasley clock.png
Person 1 ‘sensor.locationclocka’
translate(-280%,-105%) rotate(-0.03turn)
{% elif states('person.person1') == 'Town centre' %}
translate(-280%,-105%) rotate(0.14turn)
{% elif states('person.person1') == 'Work' %}
translate(-280%,-105%) rotate(0.3turn)
{% elif states('person.person1') == 'not_home' %}
{% if states('sensor.home_aperson1_direction_of_travel') == 'stationary' %}
translate(100%,-120%) rotate(-0.1turn)
{% else %}
translate(-280%,-105%) rotate(0.47turn)
{% endif %}
{% elif states('person.person1') == 'Sister in laws house' %}
translate(-280%,-105%) rotate(0.64turn)
{% elif states('person.person1') == 'Mother in laws house' %}
translate(-280%,-105%) rotate(0.80turn)
{% endif %}
person 2 ‘sensor.locationclocke’
{% if states('person.Person2') == 'home' %}
translate(-278%,-110%)rotate(0.03turn)
{% elif states('person.Person2') == 'Town centre' %}
translate(-278%,-110%) rotate(0.20turn)
{% elif states('person.Person2') == 'word' %}
translate(-278%,-110%) rotate(0.36turn)
{% elif states('person.Person2') == 'not_home' %}
{% if states('sensor.home_Person2_direction_of_travel') == 'stationary' %}
translate(-650%,-130%) rotate(0.1turn)
{% else %}
translate(-278%,-110%) rotate(0.53turn)
{% endif %}
{% elif states('person.Person2') == 'Sisters House' %}
translate(-278%,-110%) rotate(0.70turn)
{% elif states('person.Person2') == 'Mothers house' %}
translate(-278%,-110%) rotate(0.86turn)
{% endif %}
Hope this helps/inspires someone.
I didn’t understand what’s the Travelling state. For me, when I’m not in any Zone, I’m always at Lost.
How can I make the Travelling to work?
Hi, the “travelling” status is broken at the moment - it was written specifically for the location tracker that I was using at the time, and doesn’t really work with anything else.
I’m planning on rewriting it to work with the “Person” entities instead, which should work whatever location tracker you use, but I haven’t started that yet.
Can you explain the logic for traveling? I don’t think the Person have a travelling attribute…
I’ve not looked that closely at it yet.
However someone else posted a possible solution:
Maybe this is for another thread, but can someone walk me through how to change the color of the clock face and/or the other colors that aren’t changed in the card editor?