How does one authorize #fonts for use in #Hubzilla?

Sun, 21 May 2023 16:42:41 +0200

adminsforum@hubzilla.org

_jayrope wrote the following post Sun, 21 May 2023 16:42:40 +0200

How does one authorize #fonts for use in #Hubzilla?

How does one authorize #fonts for use in #Hubzilla?

I've created a fonts folder in /library, do the usual @font-face thing in style.css - but fonts don't show and browser dev tools report "downloadable font: rejected by sanitizer".

What am i missing there?

Thank you already!

@Mario Vavti @mike @𝓒𝓱𝓻𝓲𝓼

fonts css styling themes

show all 9 comments

Sun, 21 May 2023 17:21:03 +0200

_jayrope

jrp@hub.kliklak.net

Solution

Fonts must be referenced in css from /view/some-folder-name - i used /view/fonts now.

It would still be interesting to learn, why /library/fonts isn't accepted.

Note: i am using relative links for font sources in css.

Sun, 21 May 2023 17:23:41 +0200

_jayrope

jrp@hub.kliklak.net

solution part II HZ assumes /view to be the root folder, so just use ../../fonts/font.ttf in CSS

Mon, 22 May 2023 14:03:06 +0200

Mario Vavti

mario@hub.somaton.com

There is no font authorisation in Hubzilla. You should be able to serve any font you wish. Probably best to use a schema for that. You can basically override any css in a schema.

Mon, 22 May 2023 20:17:41 +0200

_jayrope

jrp@hub.kliklak.net

@Mario Vavti Okay! Have to learn, what a schema is at all, then. I'll take a look. Thank you!

Fri, 30 Jun 2023 18:54:31 +0200

RockyIII

rocky3@im.allmendenetz.de

@_jayrope Could you install different fonts? Do you have any hints you can share? Thanks

Fri, 07 Jul 2023 23:03:50 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

@_jayrope

here is how you can do it:

got to the schema file you use under /view/theme/redbasic/schema/ e.g. default.css (or create a new one)

and edit body {} e.g. like this

body {
font-size: medium; 
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 

}

if you want to use a completely different font go to #^https://gwfh.mranftl.com/fonts/ and find and select one for download.

maybe it is good to select the version "Historic Support" for older browsers too

download the font files and place them into a separate folder on your hubzilla server.

go back to the selected font page on #^https://gwfh.mranftl.com/fonts/ and copy the needed css -

before you do that edit the "customize folder prefix" as you placed the files on your server.

copy the css into the schema file and add the font-family also to the body {}

so e.g. for the font doppio-one

#^https://gwfh.mranftl.com/fonts/doppio-one?subsets=latin

the css for my server looks like this since i loaded up the font files to #^https://my.server.tld/fonts/

body {
 
  font-family: 'Doppio One';

}
 

/* doppio-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Doppio One';
  font-style: normal;
  font-weight:400;
  src: url('https://my.server.tld/fonts/doppio-one-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('https://my.server.tld/fonts/doppio-one-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://my.server.tld/fonts/doppio-one-v13-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('https://my.server.tld/fonts/doppio-one-v13-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('https://my.server.tld/fonts/doppio-one-v13-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('https://my.server.tld/fonts/doppio-one-v13-latin-regular.svg#DoppioOne') format('svg'); /* Legacy iOS */
}

the font size of the content can be edited with

.wall-item-content, .mail-conv-body, .page-body, .chat-item-text, .chat-item-text-self {
    font-size: 1.2em;
}

for menu items i have not found out jet how to edit the font size - does anybody know?

Sat, 08 Jul 2023 11:09:39 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

navigation menu can be styled with .nav-item, .pmenu-item { }

.nav-item, .pmenu-item {
 font-size: 1.2em;
 font-weight: bold;

}

Sun, 09 Jul 2023 15:57:03 +0200

od@zotum.net

In my virual private server, hubzilla is in the root domain.
How to configure the web server so that other (some could be separate to hubzilla) web sites can be created using apache virtual hosts and some will have to use some custom, personal fonts.
Also want to be able to specify certain fonts for certain hubzilla channels.
Any advice please?

Tue, 01 Aug 2023 21:22:33 +0200

𝓒𝓱𝓻𝓲𝓼

chris@im.allmendenetz.de

@od

just add different schema files with different fond files configured to certain hubzilla channels