Search code examples
cssfontsfont-facewebfonts

Cross-site access for custom font (Django web project)

Via implementing @font-face, I added a custom font to a web project for a client. However, the custom font never loads, giving the error:

downloadable font: download failed (font-family: "droid_arabic_naskh" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://mysite.azureedge.net/css/fonts/droidnaskh-regular-webfont.woff2/woff/ttf

Is there any way to fix this? Or should I revert the custom font?

Solution

  • First off that URL is not even valid. Not sure if you changed that just for posting purposes.

    You should download and import the font locally.

    This should be the css format: 

    @font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

    Ref: https://www.w3schools.com/css/css3_fonts.asp