How To link custom fonts in function.php file

I'm Trying to add custom fonts in my WordPress development theme, but I got fatal error here how I add it

/// Register fonts.
    Wp_register_style('font-awesome', get_stylesheet_uri(), [], filemtime get_template_directory_uri().'/fonts/font-awesome-webfont.woff', [], false, 'all');
    wp_register_style('Naskh', get_stylesheet_uri(), [], filemtime get_template_directory_uri().'/fonts/naskh-webfont.woff', [], false, 'all');
    wp_register_style('Roboto', get_stylesheet_uri(), [], filemtime, get_template_directory_uri().'/fonts/roboto-webfont.woff', [], false, 'all');`


`/// Enqueue Fonts.
    wp_enqueue_style('font-awesome-webfont.woff');
    wp_enqueue_style('naskh-webfont.woff');
    wp_enqueue_style('roboto-webfont.woff');`

and in the css i add it like this

`--arabic-fonts:src='\\fonts\\naskh-webfont.woff';
--english-fonts:src='\\fonts\\roboto-webfont.woff';`

`[dir="rtl"] .container {font-family:var(--arabic-fonts);}
[dir="ltr"] .container {font-family:var(--english-fonts);}`

Please help me Thanks For Your Reply I appreciate it

I tried Google It But Could Not Found Any Possible Fix

here the error that i got and sorry

Fatal error: Uncaught Error: Undefined constant "filemtime" in C:\xampp\htdocs\MyWebSite\wp-content\themes\Copper\functions.php:16 Stack trace: #0 C:\xampp\htdocs\MyWebSite\wp-includes\class-wp-hook.php(324):
copper_enqueue_scripts('')
#1 C:\xampp\htdocs\MyWebSite\wp-includes\class-wp-hook.php(348): WP_Hook->apply_filters(NULL, Array)
#2 C:\xampp\htdocs\MyWebSite\wp-includes\plugin.php(517): WP_Hook->do_action(Array)
#3 C:\xampp\htdocs\MyWebSite\wp-includes\script-loader.php(2265): do_action('wp_enqueue_scri...')
#4 C:\xampp\htdocs\MyWebSite\wp-includes\class-wp-hook.php(324): wp_enqueue_scripts('')
#5 C:\xampp\htdocs\MyWebSite\wp-includes\class-wp-hook.php(348): WP_Hook->apply_filters(NULL, Array)
#6 C:\xampp\htdocs\MyWebSite\wp-includes\plugin.php(517): WP_Hook->do_action(Array)
#7 C:\xampp\htdocs\MyWebSite\wp-includes\general-template.php(3050): do_action('wp_head')
#8 C:\xampp\htdocs\MyWebSite\wp-content\themes\Copper\header.php(13): wp_head()
#9 C:\xampp\htdocs\MyWebSite\wp-includes\template.php(810): require_once('C:\xampp\htdocs...')
#10 C:\xampp\htdocs\MyWebSite\wp-includes\template.php(745): load_template('C:\xampp\htdocs...', true, Array)
#11 C:\xampp\htdocs\MyWebSite\wp-includes\general-template.php(48): locate_template(Array, true, true, Array)
#12 C:\xampp\htdocs\MyWebSite\wp-content\themes\Copper\index.php(7): get_header()
#13 C:\xampp\htdocs\MyWebSite\wp-includes\template-loader.php(106): include('C:\xampp\htdocs...')
#14 C:\xampp\htdocs\MyWebSite\wp-blog-header.php(19): require_once('C:\xampp\htdocs...')
#15 C:\xampp\htdocs\MyWebSite\index.php(17): require('C:\xampp\htdocs...')
#16 {main} thrown in C:\xampp\htdocs\MyWebSite\wp-content\themes\Copper\functions.php on line 16 There has been a critical error on this website.

and the problem is that VS Code doesn't show any error in the editor

Solution

Enqueue styles in wordpress

you need to wrap wp_enqueue_style() in a function and call this function via add_action()
Wordpress wp_enqueue_style() expects a CSS file – not a font file . See the official codex doc.

You don't necessarily need to register the stylesheet before via wp_register_style()

Here is a simplified version for the functions.php


function add_custom_stylesheet()
{

    $version = filemtime(get_template_directory() . '/fonts.css');
    $dependencies = array();
    wp_enqueue_style('local-fonts', get_stylesheet_directory_uri() . '/fonts.css', $dependencies, $version, 'all');

}

add_action('wp_enqueue_scripts', 'add_custom_stylesheet');

Wordpress will add a <link> element to the <head> HTML output referencing CSS file fonts.css (stored in your theme directory).

<link rel='stylesheet' id='local-fonts-css' href='https://your-domain.com/wp-content/your-theme/copper/fonts.css?ver=1660338149' type='text/css' media='all' />

CSS file: specify fonts

The CSS file needs to contain a @font-face rule for every font-family.
This is not specific to Wordpress. Basically you just add the stylesheet. The actual font loading is done in CSS.

    @font-face {
        font-family: 'Naskh';
        font-weight: 400;
        font-style: normal;
        src: url('fonts/naskh-webfont.woff') format('woff')
    }

    @font-face {
        font-family: 'Roboto';
        font-weight: 400;
        font-style: normal;
        src: url('fonts/roboto-webfont.woff') format('woff')
    }

    :root {
        --arabic-fonts: 'Naskh';
        --english-fonts: 'Roboto';
    }


    /* apply fonts to elements */

    [dir="rtl"] .container {
        font-family: var(--arabic-fonts);
    }

    [dir="ltr"] .container {
        font-family: var(--english-fonts);
    }

Save your font files in a folder named fonts in your theme directory.

Cache busting via filemtime()` based CSS suffix

You don't necessarily need the filemtime() (returning a unix timestamp of your file modified age) – this is just a common cache busting technique. This can be handy if you're still frequently updating your theme.
Once you've completed the theming you can just add a static number like 1.0.0. In fact I'd rather recommend to ditch the version completely for a cached CSS file or used independently versioned themes (or child-themes) so can can easily roll back to a previous version (mytheme11 to mytheme10)