[SOLVED] Host Custom font-face CSS within my playcanvas project

I have a font-face generated file (.css) for a custom font that I want to use for my CSS/HTML UI, but putting my required fonts within the same folder as my css webfont file doesn’t seem to work. Do i need to change the URL link ? is it even possible to do so in a project.

Here is my CSS stylesheet source code. The required files are in the same folder.

@font-face {
    font-family: 'Avenir Next Ultra';
    src: url('AvenirNext-UltraLight.eot');
    src: url('AvenirNext-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-UltraLight.woff2') format('woff2'),
        url('AvenirNext-UltraLight.woff') format('woff'),
        url('AvenirNext-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-Bold.eot');
    src: url('AvenirNext-Bold.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-Bold.woff2') format('woff2'),
        url('AvenirNext-Bold.woff') format('woff'),
        url('AvenirNext-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-Regular.eot');
    src: url('AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-Regular.woff2') format('woff2'),
        url('AvenirNext-Regular.woff') format('woff'),
        url('AvenirNext-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Demi';
    src: url('AvenirNext-DemiBold.eot');
    src: url('AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-DemiBold.woff2') format('woff2'),
        url('AvenirNext-DemiBold.woff') format('woff'),
        url('AvenirNext-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-MediumItalic.eot');
    src: url('AvenirNext-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-MediumItalic.woff2') format('woff2'),
        url('AvenirNext-MediumItalic.woff') format('woff'),
        url('AvenirNext-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-Italic.eot');
    src: url('AvenirNext-Italic.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-Italic.woff2') format('woff2'),
        url('AvenirNext-Italic.woff') format('woff'),
        url('AvenirNext-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next Ultra';
    src: url('AvenirNext-UltraLightItalic.eot');
    src: url('AvenirNext-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-UltraLightItalic.woff2') format('woff2'),
        url('AvenirNext-UltraLightItalic.woff') format('woff'),
        url('AvenirNext-UltraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next Demi';
    src: url('AvenirNext-DemiBoldItalic.eot');
    src: url('AvenirNext-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-DemiBoldItalic.woff2') format('woff2'),
        url('AvenirNext-DemiBoldItalic.woff') format('woff'),
        url('AvenirNext-DemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-Bold_1.eot');
    src: url('AvenirNext-Bold_1.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-Bold_1.woff2') format('woff2'),
        url('AvenirNext-Bold_1.woff') format('woff'),
        url('AvenirNext-Bold_1.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-Medium.eot');
    src: url('AvenirNext-Medium.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-Medium.woff2') format('woff2'),
        url('AvenirNext-Medium.woff') format('woff'),
        url('AvenirNext-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-Heavy.eot');
    src: url('AvenirNext-Heavy.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-Heavy.woff2') format('woff2'),
        url('AvenirNext-Heavy.woff') format('woff'),
        url('AvenirNext-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-BoldItalic.eot');
    src: url('AvenirNext-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-BoldItalic.woff2') format('woff2'),
        url('AvenirNext-BoldItalic.woff') format('woff'),
        url('AvenirNext-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('AvenirNext-HeavyItalic.eot');
    src: url('AvenirNext-HeavyItalic.eot?#iefix') format('embedded-opentype'),
        url('AvenirNext-HeavyItalic.woff2') format('woff2'),
        url('AvenirNext-HeavyItalic.woff') format('woff'),
        url('AvenirNext-HeavyItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

If anyone could help me, would be greatly appreciated.
Best,
Tristan

They won’t work that way due to the folder structure when it publishes (each asset is in it’s own folder).

I recommend having the fonts hosted somewhere else. The alternative is to do a tedious string replacement on load in the app by getting the font asset and the file URL (https://developer.playcanvas.com/en/api/pc.Asset.html#getFileUrl) which is not fun for that many files.

That’s exactly what I tought :frowning: , I was considering using Google drive, but they do not host CSS files anymore since 2016 (acting as a CDN hosting service). I will try to find an alternative

Thank you for your answer !

GitHub will do it. You don’t have to host the CSS file itself, just the fonts and use the full URL of the fonts path in the CSS file.

I followed your advice and it’s perfectly working ! Thank you :slight_smile:

This isn’t working for me. I’m gettin a CORS ‘Access-Control-Allow-Origin’ error.

Can you post a link to your project please?

I need my fonts to be accesible offline. In my project PlayCanvas is integrated in an electron app.
I tried to use getFileUrl() in combination with webfontloader.
But getFileUrl() returns a url to a png-file instead of a font-url.

app.assets.find("myCustomFont.otf", "font").getFileUrl()

Is there a way to get the url to the original font-file?

Hi @rttmax,

The asset registry will include only the parsed files that can be used by the engine, that means all source files like .fbx or .ttf/.otf aren’t loaded.

As far as I know, you will have to manually add them to your electron app and load them from there.

I don’t know if helps, I’ve have this project that loads woff fonts as fonts to be used with Canvas Font https://playcanvas.com/project/702920/overview/canvas-font-example

1 Like

I don’t think that this is working for me because I want to use the font in html/css (@font-face).
For now @Leonidas suggestion is ok for me. I’m loading the fonts from electron.
Anyway it would be awesome to have a place in PlayCanvas to store “static” assets like fonts.

Check out using font-face with base64 font files: http://stephenscaff.com/articles/2013/09/font-face-and-base64-data-uri/

Here’s a site that encodes files to base64: https://dataurl.sveinbjorn.org/#dataurlmaker

1 Like

That’s what I did in that project above. I’ve used woff as they don’t get converted on import in the editor