Install local font (not google fonts)

Hi @akarimizn,

You’ll need to add @font-face rules for you non-Google font as well.

Here is an article that may assist you: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Also see: https://css-tricks.com/snippets/css/using-font-face-in-css/

There are also several tools online that do the @font-face generation (and webfont conversion) for you – like this one: https://www.fontsquirrel.com/tools/webfont-generator

Here’s an example:

@font-face {
    font-family: 'modernlinebold';
    src: url('https://EXAMPLE.com/fonts/modernlinebold.eot') format('embedded-opentype'),
         url('https://EXAMPLE.com/fonts/modernlinebold.woff2') format('woff2'),
         url('https://EXAMPLE.com/fonts/modernlinebold.woff') format('woff'),
         url('https://EXAMPLE.com/fonts/modernlinebold.ttf') format('truetype'),
         url('https://EXAMPLE.com/fonts/modernlinebold.svg#modernlinebold') format('svg');
}

Can you explain a little bit?
Suppose all I have just a woff2 format font file stored at the following address.

https://example.com/wp-content/uploads/2023/07/font.woff2

Now what is the CSS code that I should add to the site?

Here’s an example:

 @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'YOUR-FONT-NAME';
        font-style: normal;
        font-weight: 400;
        src: url('https://example.com/wp-content/uploads/2023/07/font.woff2') format('woff2');
    };

Note that it would be better to add more font formats like woff so that you’ll have a wider support for your font device-wise.