CODEWITHSUNDEEP
htmlcss
JSON_Derulo
JSON_Derulo

Reputation: 992

How to load custom fonts?

I am trying to upload a custom font to a webpage I am working on and cannot figure out why it won't work. I know it won't work in the snippet at the font file is not uploaded, but given the fact that the path to the file is correct and the css file is linked to the html document shouldn't it work properly?

@font-face {
    font-family: 'customFont';
    src: url(../fonts/BebasNeueBook.otf) format("otf");
}

.text{
    color: rgb(87, 87, 87);
    font-family: customFont !important;
}
<span class="phone text">T. 1 877 412 0888</span>

Upvotes: 0

Views: 77

Answers (1)

StefanBob
StefanBob

Reputation: 5128

Honestly your code seems about right... but only .otf file.

Try dragging your otf font into this site: https://transfonter.org/ which will give you all the webfont formats in one download and the css needed to make it work.

If it doesn't show up after that, then something else is up

Upvotes: 1

Related Questions