Cannot load external fonts in custom theme

Mon, 12 Feb 2024 21:23:00 +0530

adminsforum@hubzilla.org

Saiwal wrote the following post Mon, 12 Feb 2024 21:22:57 +0530

Cannot load external fonts in custom theme

I'm trying to use custom google fonts but they are not being loaded with the following error in console:

Content-Security-Policy: The page’s settings blocked the loading of a resource at https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap (“style-src”).

any way to fix this?

show all 9 comments

Mon, 12 Feb 2024 21:56:09 +0530

Harald Eilertsen

harald@hub.volse.no

@Saiwal The best way is to download the font(s) you want, and serve them from your theme.

The less good way is to reduce the security of your site by opening, or disabling, the content security policy to allow resources on external sites to load.

Mon, 12 Feb 2024 22:26:18 +0530

sk@hub.utsukta.org

@Harald Eilertsen thankyou, that was helpful :)

Tue, 13 Feb 2024 15:21:09 +0530

od@zotum.net

@Harald Eilertsen

serve them from your theme.

Documenation to describe how please?

Tue, 13 Feb 2024 16:32:20 +0530

Harald Eilertsen

harald@hub.volse.no

@od

Documenation to describe how please?

You include the files somewhere within your theme directory, and then use the URL to the file for the resource instead of the URL on the remote service.

Typically this will be something like z_root() . '/view/theme/yourtheme/fonts/my-awesome-font.woff'.

Otherwise exactly the same as for using the external resource.

This is web, not magic :)

Wed, 14 Feb 2024 14:40:52 +0530

Scott M. Stolz

scott@loves.tech

@Harald Eilertsen

This is web, not magic :)

So that is why waving my wand around isn't working?

Wed, 14 Feb 2024 16:34:29 +0530

Harald Eilertsen

harald@hub.volse.no

@Scott M. Stolz Quite likely. Maybe I shouldn't dispel the notion of arcane knowledge required to operate this stuff :)

Thu, 15 Feb 2024 12:04:18 +0530

Scott M. Stolz

scott@loves.tech

@Harald Eilertsen Waving my hand around seems to only work when I approach doors at grocery stores, for turning on water in a public restroom, and for certain types of towel dispensers.

Sat, 17 Feb 2024 17:02:32 +0530

od@zotum.net

@Harald Eilertsen
There was a conversation thread in another forum (documentation? Seems to have disappeared) and the unknown behaviour of css within themes and module 'webpages'

"somewhere in theme directory" seems too vague. It would be better if it was known of recommended locations, similar to TeX directory standard

Sat, 17 Feb 2024 18:14:31 +0530

Harald Eilertsen

harald@hub.volse.no

@od I agree the stuff around custom themes is severly underdocumented (like pretty much the rest of the software.)

But once you are running the code of your theme you are free to do whatever you want, so it is literally "somewhere in your theme directory." It's a good idea to keep things a bit orgnized, but there's (almost) no structure imposed by Hubzilla.

That is. Hubzilla expects certain files to be at somewhat specific locations. These are files that Hubzilla will load and execute directly. I'll try to document these below:

The theme must be located in a subdirectory in the view/theme directory, where the subdirectory name is the name/slug of the theme.
There should be a file php/theme.php within the theme directory with a comment containing the fields to describe the theme. If this file is not present, the default info for that theme is returned by the get_theme_info function.
There must be a file theme_init.php at an appropriate location within the theme subdirectory. (See below.) This can be empty, but can also be used to initialize the theme further, e.g adding fonts, styles, etc as needed.
The theme should have either a php/style.php or a css/style.css file within the theme directory. If the php file is present it will be used, otherwise the static css is.
If there is a file at an appropriate place within the theme directory with the same slug as the theme, but with a .js extension, it is added to the javascripts loaded by Hubzilla.
If there is a file at an appropriate place within the theme directory named like mod_{$module}.php where {$module} is the requested module (i.e the first URL path after ), it will be loaded by Hubzilla.
The same for mod_{$module}.css, and mod_{$module}.js.
If there is a file within the theme subdirectory called experimental the theme is marked as experimental.
If there is a file within the theme subdirectory called unsupported the theme is marked as unsupported.
If there is a file img/screenshot.{png,jpg} within the theme subdirectory, it will be used as the screenshot of the theme (not sure if/where this is used). Otherwise the default blank.png will be used.

Whenever I mention "appropriate location" or appropriate place" above, it means that the file must be located in one of these places:

a subdirectorie named after the file extensions within the theme directory or the parent theme directory
the widget subdirectory of the theme
the view/site directory, or the view directory itself.

This is due to Hubzilla using the theme_include helper function to load or add these files.

Anything not loaded directly by Hubzilla can be organized in any way you want.