Question

My django app font fies from DO spaces are not working in any browser.

Posted May 25, 2020 97 views
Django

The font files are seen in the browser that they exist from the DO spaces cdn but they are not working in any browser. I even added the cdn links of the font-files directly into the css @font-face rules but its not still working.

4 comments
  • Hey @cyberposh,

    This is a bit hard to diagnose with such limited info. Could you provide a live demonstration of the issue on a site like https://codepen.io?

  • I have a django app on a live server, the static files are hosted on Digital Ocean spaces. The static files are working well but the fonts are not. I thought probably it was because the font files are linked to the /static/ folder so I changed the @font-face src: url() parameter in my css stylesheet to the digital ocean spaces cdn link for the font files but its not still working. I even embedded the @font-face rule in the html template and connected the font files with the django static files template url but its still not working. Though the font is working on my loacalhost.

  • {% load static %}
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    
        <style type="text/css">
    
            @font-face {
                font-family: 'TT Norms Pro';
                src: url(' {% static 'user/fonts/TTNormsPro-Bold.eot' %} ');
                src: local('TT Norms Pro Bold'), local('TTNormsPro-Bold'),
                    url('{% static 'user/fonts/TTNormsPro-Bold.eot?#iefix' %} ') format('embedded-opentype'),
                    url('{% static 'user/fonts/TTNormsPro-Bold.woff2' %}') format('woff2'),
                    url('{% static 'user/fonts/TTNormsPro-Bold.ttf' %}') format('truetype');
                font-weight: bold;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'TT Norms Pro';
                src: url('{% static 'user/fonts/TTNormsPro-Regular.eot' %}');
                src: local('TT Norms Pro Regular'), local('TTNormsPro-Regular'),
                    url('{% static 'user/fonts/TTNormsPro-Regular.eot?#iefix' %}') format('embedded-opentype'),
                    url('{% static 'user/fonts/TTNormsPro-Regular.woff2' %}') format('woff2'),
                    url('{% static 'user/fonts/TTNormsPro-Regular.woff' %}') format('woff'),
                    url('{% static 'user/fonts/TTNormsPro-Regular.ttf' %}') format('truetype');
                font-weight: normal;
                font-style: normal;
            }
    
    
        </style>
    
        <link rel="stylesheet" href=" {% static 'user/libs/css/bootstrap.min.css' %} ">
        <link rel="stylesheet" href=" {% static 'user/libs/fontawesome/css/all.min.css' %} ">
        <link rel="stylesheet" href=" {% static 'user/libs/css/flatpickr.min.css' %} ">
        <link rel="stylesheet" href=" {% static 'user/libs/css/animate.css' %} ">
        <link rel="stylesheet" href=" {% static 'user/default-styles.css' %} ">
        <link rel="stylesheet" href=" {% static 'user/styles.css' %} ">
        <link rel="stylesheet" href=" {% static 'user/media-queries.css' %} ">
    
    
        <script src=" {% static 'user/libs/js/jquery-3.3.1.min.js' %} "></script>
        <script src=" {% static 'user/libs/js/popper.min.js' %} "></script>
        <script src=" {% static 'user/libs/js/bootstrap.min.js' %} "></script>
        <script src=" {% static 'user/libs/js/list.min.js' %} "></script>
        <script src=" {% static 'user/libs/js/sweetalert2@9.js' %} "></script>
        <script src=" {% static 'user/libs/js/flatpickr.js' %} "></script>
        <script src="https://kit.fontawesome.com/88095687d9.js" crossorigin="anonymous"></script>
    
    </head>
    
  • @cyberposh just a codepen that has the font-face definitions with your spaces URLs, so that we can see the error that is happening, where they aren’t working.

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer

So the thing is, I have a django app on a live server, the static files are hosted on Digital Ocean spaces. The static files are working well but the fonts are not. I thought probably it was because the font files are linked to the /static/ folder so I changed the @font-face src: url() parameter in my css stylesheet to the digital ocean spaces cdn link for the font files but its not still working. I even embedded the @font-face rule in the html template and connected the font files with the django static files template url but its still not working. The surprising thing is that all of these work on my localhost. I’m not sure what to put on codepen here.

Submit an Answer