unfoldadmin styles don't work offline

[DRakkola]

how can I make the site behave the same way even without internet connection ?

[DRakkola]

[justinqian42]

The reason the google fonts don't display is that they are linked to google font api urls. You need to override templates/unfold/layouts/skeleton.html

Change the following lines

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,0,0" rel="stylesheet"/>

to the local css files.

Also, don't forget to put the .woff files in local, and edit the links in the above mentioned css files .

[lukasvinclav]

@DRakkola actually this is very good remark. The reason why the icons & fonts are not working is because they are coming from external source. I was already considering embedding these resources directly into project but I was never sure if everybody would want to self-host fonts & icons.

In the future I will consider all pros & cons of both approaches. Of course, feedback from community will be helpful as well.

[shmulvad]

+1 to embedding the sources directly into the project. I agree that Unfold should be self-contained. By using Unfold, we are already self-hosting the associated CSS/etc static files. I don't see why it should be different for the fonts.

For context, I was using this project in an environment where the user only has access to a corporate network. To get it working, I had to use a similar workaround as described above. It would nice if these hacks were not necessary and it worked out of the box.

[lukasvinclav]

@shmulvad @DRakkola thanks for report. fixed in #235

[VaZark]

Can we have a little note in the docs on how to add back the Google fonts? Since font files are subject to CORS, I would have had to modify my AWS rules and it's far simpler to add the link tags in my case. Or list the source the exact fonts required so that we can do it ourselves

It's just

{% extends "unfold/layouts/skeleton.html" %}

{% block extrastyle %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,0,0" rel="stylesheet"/>
{% endblock %}