Using custom local font

Developer help
1

Hi experts,

I am trying to use a custom font which is stored locally.
When I put the font in pjroot/content/images and load in my css, it is working fine.
But when I put the font in other folders like pjroot/content/data or pjroot/content/fonts(custom folder), I am getting 404 error.
It seems like only pjroot/content/images folder is public.
Where and how can I change the configuration?

Best Regards,

2

If you want to use a custom font, your best place to upload it is via your theme. The content/images folder is used for images, and the content/data folder is used for json exports and the database (for sqlite users), so it’s intentionally not made public.

3

Can you please show me some high level steps to achieve it?
Thanks in advance.

4

Hi
I am referencing the font in my custom css (assets/built/custom.css) like this.

@font-face {
    font-family:'Zawgyi-One';
    src: url('/content/images/zawgyi.ttf');
}

Where should I keep my font file and how can I access it?
Thanks.

1 Like
5

Hello,
Make a new folder named “font” within your assets folder, and keep all your custom fonts within that folder.

Then reference that font in your custom CSS (assets/built/custom.css) like following.

@font-face {
    font-family:'Zawgyi-One';
    src: url('../font/zawgyi.ttf');
}
6

Hi @GBJsolution

I did the same as you suggested. I am getting 404 error.

Best Regards,
Fred

7

Are you getting 404 error for the font file or the custom css file?

8

For the font file. I was already using the custom css. I just updated the content for the url.

9

If your fonts are in "font folder within assets folder of your theme. And your custom css file is in assets/built/ folder.
This means your font folder and built folder are in the same location.

Technically it should work. I have also tested it in my local install, in Casper theme. And it is working fine without any error.
Will you double check every thing again? I mean, folder location and spelling.

10

My css is as follow.

@font-face {
    font-family:'Zawgyi-One';
    src: url('../font/zawgyi.ttf');
}

But the 404 error is like this.
GET https://mysite/assets/font/zawgyi.ttf/ net::ERR_ABORTED 404

I tried https://mysite/assets/font/zawgyi.ttf link on the browser it is working.
But css automatically added “/” to the url and https://mysite/assets/font/zawgyi.ttf/ failed.

Best Regards,
Fred

11

As you mentioned your CSS code above, there is no “/” at the start of the font URL before “…”
This type of error occurs when there is a “/” at the beginning of the URL.

Anyways, try to use an absolute URL like this.

src: url('https://mysite/assets/font/zawgyi.ttf');

I know it is not an actual solution, because it’s depends on site URL and we have to edit css file if we change the domain.

SOME EXTRA INFORMATION NOT DIRECTLY RELATED TO THE PROBLEM

Also please note that you should use more extensive @font-face rule with different format of font file to work in all browser.

Worth reading the following links articles:
https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Also, you can use an online font converter to convert .ttf font to other format of fonts.
Font Squirrel has a web font generator tool which is among popular ones.

1 Like
12

Thanks.
It works correctly with absolute URL path.
And thanks for the CSS -tricks link.

13

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.