Custom / Google arabic font on wordpress

Question

I've tried installing a custom font and also tried google Fonts but it's not affecting me anywhere. screenshots are given of how they are appearing and how they should appear.

/*this is google font*/
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700&display=swap');

/* this is custom font */
@font-face {
    font-family: 'kanun_arltmedium';
    font-weight: 500;
    font-style: normal;
    src: url('webfonts/kanun_arlt-medium-webfont.woff2') format('woff2'), url('webfonts/kanun_arlt-medium-webfont.woff') format('woff'), url('webfonts/kanun-arlt-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'kanun_arltregular';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('webfonts/kanun_arlt-regular-webfont.woff2') format('woff2'), url('webfonts/kanun_arlt-regular-webfont.woff') format('woff'), url('webfonts/kanun-arlt-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'kanun_arltbold';
    font-style: normal;
    font-weight: bold;
    font-display: auto;
    src: url('webfonts/kanun_arlt-bold-webfont.woff2') format('woff2'), url('webfonts/kanun_arlt-bold-webfont.woff') format('woff'), url('webfonts/kanun-arlt-bold.ttf') format('truetype');
}

/* End Custom Fonts CSS */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] span.elementor-heading-title.elementor-size-default, h1 {
    font-family: 'Vazirmatn', sans-serif !important;
}

<h1>مرحباً بكم في ربع قرن للموسيقى</h1>

Answer 1

Put the following in style

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] span.elementor-heading-title.elementor-size-default, h1 {
    font-family: 'Vazirmatn', sans-serif;
}

@import should be at the first of the file