Failed to import custom font and override it

[kupanglie]

Hi everyone, i need your help here..

So here is the problem,
i’m using website template, and today i want to change the font with custom font. i’m trying to use @font-face and put that font in class, like this

@font-face
        {
            font-family:avenir-black;
            src: url('{{ asset('fonts/AvenirLTStd-Black.woff') }}') format('woff');
        }
        @font-face
        {
            font-family:avenir-medium;
            src: url('{{ asset('fonts/AvenirLTStd-Medium.woff') }}') format('woff');
        }
        @font-face
        {
            font-family:avenir-light;
            src: url('{{ asset('fonts/AvenirLTStd-Light.woff') }}') format('woff');
        }
        .avenir-black
        {
            font-family:avenir-black;
        }

and i want to use that class avenir-black in some div, like this

<div>
                            <h3 class="work-title avenir-black">All Season Jakarta Thamrin</h3>
                            <div>
                                Jl. Talang Betutu No. 2, Central Jakarta<br>
                                (+62-21) 3042222<br>
                            </div>
                        </div>

is there any problem in my code or any suggestion for me? thanks

[Senff]

Not sure what this format is:

src: url('{{ asset('fonts/AvenirLTStd-Black.woff') }}') format('woff');

shouldn’t it be just this?

src: url('fonts/AvenirLTStd-Black.woff') format('woff');

If it’s the right format, make sure it’s pointing to the right path of the fonts folder.

[Author]

Posts