How to change the font and size

[IosifZ]

Hey guys,

Awesome app, I really like it, except for the font and size. I read a little bit about the custom css option and tried to implement it. However it doesn't seem to work.

Here is my setup:

Docker compose:

glance:
    image: glanceapp/glance
    container_name: glance
    hostname: glance
    restart: unless-stopped
    volumes:
      - './glance/app/glance.yml:/app/glance.yml'
      - './glance/app/assets:/app/assets'      
      - '/etc/timezone:/etc/timezone:ro'
      - '/etc/localtime:/etc/localtime:ro'
    ports:
      - '25580:8080'
    env_file:
      - .env
    environment:
      - com.ouroboros.enable=true
      - 'TZ=${TZ}'
      - 'PUID=${PUID}'
      - 'PGID=${PGID}'      
      - 'GITHUB_TOKEN=${GITHUB_TOKEN}' 
    labels:
      - com.ouroboros.enable=true
      - traefik.enable=true
      - traefik.http.routers.glance_https.entrypoints=web-secure
      - 'traefik.http.routers.glance_https.rule=Host(`glance.${ZONE}`)'
      - traefik.http.routers.glance_https.tls=true
      - traefik.http.routers.glance_https.tls.certresolver=basic
      - traefik.http.services.glance.loadbalancer.server.port=8080
      - traefik.http.routers.glance_https.middlewares=fauth

Glance config file:

server:
  assets-path: /app/assets

theme:
#  background-color: 50 1 6
  background-color: 0 0 0
#  primary-color: 24 97 58
  primary-color: 0 100 50
  negative-color: 209 88 54
  contrast-multiplier: 3
  text-saturation-multiplier: 3
  custom-css-file: /app/assets/iosif-styles.css  

Custom CSS File config:

@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./Roboto-Regular.woff2) format('woff2');
}

:root {
  font-size: 30px;
}

Directory structure:

glance
  app
    assets
      iosif-styles.css
      Roboto-Regular.woff2
    glance.yml

What am I missing here?

Thanks a lot for your help.

[IosifZ]

Using Inspect in my browser I was able to find this error:

Refused to apply style from 'https://glance.EXAMPLE.com/app/assets/iosif-styles.css?v=1726228998' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

But I do not know what the problem is :)

[svilenmarkov]

Hey,

In your config you have to specify the path relative to the URL like this:

custom-css-file: /assets/iosif-styles.css  

Without the /app/. You should then be able to access it at:

https://glance.example.com/assets/iosif-styles.css

[IosifZ]

Hey,

In your config you have to specify the path relative to the URL like this:

custom-css-file: /assets/iosif-styles.css  

Without the /app/. You should then be able to access it at:

https://glance.example.com/assets/iosif-styles.css

I tried this but the message is still present and the behavior is not changing:

glance.yml:

server:
  assets-path: /app/assets/

theme:
#  background-color: 50 1 6
  background-color: 0 0 0
#  primary-color: 24 97 58
  primary-color: 0 100 50
  negative-color: 209 88 54
  contrast-multiplier: 3
  text-saturation-multiplier: 3
  custom-css-file: /assets/iosif-styles.css  

iosif-styles.css:

@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./Roboto-Regular.woff2) format('woff2');
}

:root {
  font-size: 30px;
}

And here is the google inspect piece:

[IosifZ]

Finally I got it working. The difference was that previously after I did some changes I used the "Compose up - Select Services" from Visual Code to rebuild glace:

Executing task in folder docker-box: docker compose  -f "docker-compose.yml" up -d --build glance 

[+] Running 1/1
 ✔ Container glance  Running                                                                                                                                                           0.0s 
 *  Terminal will be reused by tasks, press any key to close it.

But if I right click on the container and choose Restart, it picked the new changes without issues.

[IosifZ]

Hopefully my story will help others on the same path :).