1

I'm posting here because I'm struggling to get my head around what seems to be a simple issue. The setup is the following :

  • Angular application uses static resources (such as fonts).
  • The angular app is deployed using docker which includes an nginx server distributing the files.
  • The whole container is hosted on Openshift and is accessed via the "classic" openshift networking pattern :
    1. Http call reaches route (openshift CRD for ingress, manages SSL).
    2. call gets redirected to service.
    3. service send the call to a single pod (managed via a DeploymentConfig, which is an openshift CRD similar to deployments).

The issue is the following : When loading the page, some static resources (fonts espacially) do not get loaded. There are no traces of any http call in the network tab of the browser tools, and the fonts used do not display anything (used for icons).

Some fonts are called in a css file as such (generated from angular sources) :

@font-face {
    font-family: FontAwesome;
    src: url(fontawesome-webfont.2b13baa7dd4f54c9.eot?v=4.7.0);
    src: url(fontawesome-webfont.2b13baa7dd4f54c9.eot?#iefix&v=4.7.0) ...;
}

Related symptoms :

We have noticed some 304 http response codes in the nginx server :

{"@timestamp": "2024-02-26T10:34:50+01:00","source": { "ip": "" },"http": {"request": { "method": "GET", "line": "GET /fontawesome-webfont.e9955780856cf8aa.woff2?v=4.7.0 HTTP/1.1", "bytes": 1268, "referrer": "https://<base_url>/styles.dc792cbafebe4f47.css" },"response": { "status_code": 304, "bytes": 214 }},"user_agent": { "original": "..." },"processing_time":"0.000"}

When some fonts are missing : enter image description here

When loading wile deactivating cache : enter image description here

Example of reponse headers sent by the nginx server : enter image description here

Local cache seems to be empty and not contain any ressource : enter image description here


Our setup :

The NGINX config we are using is the following

include /opt/rh/rh-nginx118/root/usr/share/nginx/modules/*.conf;

events {
    worker_connections  1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/opt/rh/rh-nginx118/log/nginx/access.log  main;

    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;
    keepalive_timeout  65;
    types_hash_max_size 4096;
    
    include       /etc/opt/rh/rh-nginx118/nginx/mime.types;
    
    default_type  application/octet-stream;

    # The next block is loaded using the following include statement
    # for simplicity purposes, the files have been merged
    #include /opt/app-root/etc/nginx.d/*.conf;

    server_tokens off;

    gzip  on;
    gzip_types  text/css text/xml font/ttf font/woff font/woff2 font/otf image/gif image/jpeg image/png image/svg+xml image/tiff image/vnd.wap.wbmp image/webp image/x-icon image/x-jng image/x-ms-bmp application/javascript;
    
    server {
        listen       8080 default_server;
        listen       [::]:8080 default_server;
        server_name  _;
        root         /opt/app-root/src;

        # The next block is loaded using the following include statement
        # for simplicity purposes, the files have been merged
        #include      /opt/app-root/etc/nginx.default.d/*.conf;
        location ~* \.(ico|css|js|gif|jpe?g|png|svg|ttf|woff2?|otf)$ {
          expires 1d;
          add_header Cache-Control "public, must-revalidate";
        }
        
        location / {
          try_files $uri $uri/ /index.html?$args;
        }
    }

}

Our mime.types does also include the woff and woff2 mime types, as indicated by @VonC.

Disabling browser cache solves the issue, but is not a viable solution.

Any help would be more than appreciated. Thanks.


Edit 1 : The NGINX conf has been added to the post. Screenshots have been added to give more context.

1
  • Judging from the screenshots there is no initiator for fonts. Hence they are not loaded. This looks not like a font cache issue, but like an issue with JS/CSS which does not load the font. Try debugging your component if it's attached correctly. If the CSS is being attached to the dom. If it does not – no wonder fonts are not loaded. No one requested for them. Commented Mar 3, 2024 at 22:06

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.