I'm using a custom font with font-face but it does not work-CodePudding

I want to use a custom font in my code and I'm using @font-face in scss for that but it does not work. Here is the code

@font-face {
    font-family: "Yekan";
    src: url("./Assets/fonts/BYekan.ttf") format("ttf");
}

body {
    font-family: "Yekan";
}

CodePudding user response：

Check your 'Network' tab in Developer tools, if there is your font loaded. If not found, you can have bad path in url. Also check if you have your CSS loaded.

I recommend use woff/woff2 format of fonts.

CodePudding user response：

Amirmohammad!

You need to use @font-face to define and use custom font.

You also can use few @font-face directives with the same font family name and different font-weight and font-style for different fonts, for instance, Roboto Bold and Roboto Regular. You need to use URLs to different font files. Look at the demo below.

I also recommend you to convert ttf files to woff2 and woff and not to use ttf if you don't need to support old browsers. ttf fonts are heavy and you probably don't need them. There're online and command line converters.

You can even define URLs to woff2 and woff at the same @font-face, just define the most modern woff2 higher than woff and other older file extensions, the browser will prioritize them from top to bottom. If the browser supports the first font extension, then it will use the first one. If not, it will use the next one and so on.

You can also try to define the path to your font absolutely, from the root folder of your site starting with a slash without a dot, like that: /Assets/font/your-font.ttf. Or you can try to use relative path from the current css file. For instance, if your font and css folders are in Assets, and the current css is in css folder, your path to the font will be ../font/your-font.ttf. Two dots mean 'go one folder level upper'.

@font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: url("./Assets/fonts/Roboto-Regular.woff2") format("woff2"),
             url("./Assets/fonts/Roboto-Regular.woff") format("woff"), 
             url("./Assets/fonts/Roboto-Regular.ttf") format("ttf");
    }
    
@font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        src: url("./Assets/fonts/Roboto-Bold.ttf") format("ttf");
    }    

body {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal; 
    /* This rule makes text typed with Roboto Regular defined with the first @font-face */
}

.h1 {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal; 
    /* This rule makes text typed with Roboto Bold defined with the second @font-face. 
    Look at different font-weight values in body and this .h1. font-families are the same. */
}