how to set font-family in browser on the server in css html

127 Views Asked by At

I made a simple project Inside it, I added font to all tags, body and * But in local everything is correct and works well Even I added font-family as important, but when the project goes to the server, the font is not applied

@font-face {
    font-family: iransans;
    src: url('./webFonts/fonts/woff2/IRANSansWeb.woff2') format('woff2');
    src: url('./webFonts/fonts/ttf/IRANSansWeb.ttf') format('ttf');
    src: url('./webFonts/fonts/eot/IRANSansWeb.eot') format('eot');
}

*,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: iransans;
}

p,
h1,
h2,
h3,
h4,
h5,
b,
small,
b,
span {
    font-family: iransans !important;
}

Note : When I inspect the server, I can see the font I have applied in the style section, but nothing has been applied, so it is not as if I have given a font. That is, these codes that I put now are on the server, but they have no effect

A photo that confirms the correctness of the address

enter image description here

Warnings that can be seen in the console

enter image description here

1

There are 1 best solutions below

0
herrstrietzel On

Your @font-face rule has multiple errors.
You need to add multiple font formats as a comma-separated list in the src property like so:

@font-face {
    font-family: iransans;
    src: url('./webFonts/fonts/woff2/IRANSansWeb.woff2') format('woff2'),
         url('./webFonts/fonts/ttf/IRANSansWeb.ttf') format('truetype');
}

Currently your adding multiple src properties – only the last is applied which happens to use the deprecated .eot unsupported (Internet-Explorer-only) format.

Thats why you get the error

"Downloadable font: no supported format found ..."

We can remove this eot completely. Besides, the correct format value for truetypes is format(truetype) - not ttf.

Ensure your font files were transferred correctly (as binary files). Some bundlers like webpack may try to copy/move files in text mode.
However: In this case you would usually get a OTS-parsing error.

You can try to manually replace your font files via a ftp client (e.g filezilla). If this solves the error - you have to check your file transfer settings.