Question

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

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.

Subscribe
Share

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?

@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.

{% 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>

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.


Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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.

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.