Jump to content

Custom Font: Cannot Load


Recommended Posts



I have this on my stylesheet.css

@font-face {    font-family: 'alpha_echo';    src: url('Fonts/alpha_echo.eot');    src: url('Fonts/alpha_echo.eot?#iefix') format('embedded-opentype'),         url('Fonts/alpha_echo.woff') format('woff'),         url('Fonts/alpha_echo.ttf') format('truetype'),         url('Fonts/alpha_echo.svg#alpha_echoregular') format('svg');    font-weight: normal;    font-style: normal;}

Then use the text in Phaser the way it is, But I am getting error in Chrome that says alpha_echo.woff 404 not found and in Firefox alpha_echo.woff and alpha_echo.ttf is also not found.


Any help would be appreciated. Thanks!

Link to comment
Share on other sites

Two things:


1. Use "double quotes" (not 'single quotes') when declaring a font name. 

font-family: "alpha_echo"; 

2. Paths are relative to the CSS file. At the moment, your current rule assumes the Fonts directory is a sibling of (next to) your CSS file.


For exampl​e:


If your stylesheet lives within a CSS directory and your Fonts directory is outside of it, the correct path to your font would be '../Fonts/alpha_echo.eot'.

src: url('../Fonts/alpha_echo.eot');...

Hope that helps.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...