Trouble adding Open Dyslexic to my wordpress theme files

I am attempting to build a Wordpress theme. For various reasons I am trying to incorporate accessibility instantly. One of the ways I am doing this is by giving the user option to choose fonts but I am struggling to get Open Dyslexic to even register on my web theme.

I have tried putting the font face directly in the style.css to check that isn't the problem, even attempted to add !important at the end of any css font-family code.

What am I doing wrong?

style.css/fonts.css

@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?> /fonts/opendyslexic/compiled/OpenDyslexic-Regular.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?> /fonts/opendyslexic/compiled/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Open Dyslexic Bold */
@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Bold.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* Open Dyslexic Italic */
@font-face {
    font-family: 'Open Dyslexic';
    src: url("<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Italic.woff2") format('woff2'),
         url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* Open Dyslexic Bold Italic */
@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?> /fonts/opendyslexic/compiled/OpenDyslexic-BoldItalic.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?> /fonts/opendyslexic/compiled/OpenDyslexic-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

customizer.php

/* Open Dyslexic Regular */
@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Regular.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Open Dyslexic Bold */
@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Bold.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* Open Dyslexic Italic */
@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Italic.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* Open Dyslexic Bold Italic */
@font-face {
    font-family: 'Open Dyslexic';
    src: url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-BoldItalic.woff2') format('woff2'),
         url('<?php echo get_template_directory_uri(); ?>/fonts/opendyslexic/compiled/OpenDyslexic-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

functions.php

<?php
// Theme setup
function themename_theme_setup() {
    // Support for post thumbnails (featured image)
    add_theme_support('post-thumbnails');
    
    // Support for custom logo
    add_theme_support('custom-logo');
    
    // Register Navigation Menus
    register_nav_menus(array(
        'main' => __('Main Menu', 'themename'),
        'social' => __('Social Menu', 'themename')
    ));
    
    // Add customizer options
    require get_template_directory() . '/customizer.php';
}
add_action('after_setup_theme', 'themename_theme_setup');

// Enqueue Styles and Scripts
function themename_enqueue_scripts() {
    // Enqueue the main theme stylesheet (style.css)
    wp_enqueue_style('themename-style', get_stylesheet_uri());

    // Enqueue Nightmode Script
    wp_enqueue_script('nightmode', get_template_directory_uri() . '/js/nightmode.js', array(), null, true);

    
    // Enqueue Google Fonts
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Charm&family=Merryweather&family=Courier+New&family=Times+New+Roman&display=swap', false);

    // Enqueue Open Dyslexic font from Font Library (via CDN)
     wp_enqueue_style('open-dyslexic', get_template_directory_uri() . '/css/fonts.css', null);
}
add_action('wp_enqueue_scripts', 'themename_enqueue_scripts');

// Register Sidebar
function themename_register_sidebar() {
    register_sidebar(array(
        'name'          => 'Main Sidebar',
        'id'            => 'main-sidebar',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'themename_register_sidebar');

// Function to dynamically add CSS based on customizer settings
function themename_dynamic_styles() {
    ?>
    <style type="text/css">
        /* Body Background Color */
        body {
            background-color: <?php echo esc_attr(get_theme_mod('body_background_color', '#ffffff')); ?>;
            color: <?php echo esc_attr(get_theme_mod('font_color', '#333333')); ?>;
            font-family: <?php echo esc_attr(get_theme_mod('paragraph_font', 'Arial')); ?>, sans-serif;
        }

        /* Header Background Color */
        header {
            background-color: <?php echo esc_attr(get_theme_mod('header_background_color', '#f4a261')); ?>;
            color: <?php echo esc_attr(get_theme_mod('font_color', '#333333')); ?>;
        }

        /* Footer Background Color */
        footer {
            background-color: <?php echo esc_attr(get_theme_mod('footer_background_color', '#f8f8f8')); ?>;
            color: <?php echo esc_attr(get_theme_mod('font_color', '#333333')); ?>;
        }

        /* Sidebar Background Color */
        #sidebar {
            background-color: <?php echo esc_attr(get_theme_mod('sidebar_background_color', '#f1f1f1')); ?>;
        }

        /* Links Background Color */
        a {
            background-color: <?php echo esc_attr(get_theme_mod('links_background_color', '#0073e6')); ?>;
        }

        /* Night Mode Styles */
        <?php if (get_theme_mod('night_mode_toggle', 'off') == 'on') : ?>
            body.nightmode {
                background-color: #000080 !important;
                color: #f0f0f0 !important;
            }
            body.nightmode header,
            body.nightmode footer {
                background-color: #000000 !important;
                color: #f0f0f0 !important;
            }
            body.nightmode #sidebar {
                background-color: #6a0dad !important;
            }
        <?php endif; ?>

        /* Typography */
        body {
            font-family: <?php echo esc_attr(get_theme_mod('paragraph_font', 'Arial')); ?>, sans-serif;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: <?php echo esc_attr(get_theme_mod('heading_font', 'Poppins')); ?>, sans-serif;
        }
    </style>
    <?php
}
add_action('wp_head', 'themename_dynamic_styles');

I was expecting the theme to display open dyslexic font when font-family: "Open Dyslexic" !important is used. Tried to see if it was an enqueueing error by placing it in the style.css which works. double checked the pathway.

I'm an idiot. The fonts needed to be in PHP not in CSS.

fonts.php

<?php
function joshannon_add_custom_fonts() {
    $font_base = get_template_directory_uri() . '/fonts/opendyslexic/compiled/';
    ?>
    <style>
        @font-face {
            font-family: 'Open Dyslexic';
            src: url('<?php echo $font_base; ?>OpenDyslexic-Regular.woff2') format('woff2'),
                 url('<?php echo $font_base; ?>OpenDyslexic-Regular.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'Open Dyslexic';
            src: url('<?php echo $font_base; ?>OpenDyslexic-Bold.woff2') format('woff2'),
                 url('<?php echo $font_base; ?>OpenDyslexic-Bold.woff') format('woff');
            font-weight: bold;
            font-style: normal;
        }
        @font-face {
            font-family: 'Open Dyslexic';
            src: url('<?php echo $font_base; ?>OpenDyslexic-Italic.woff2') format('woff2'),
                 url('<?php echo $font_base; ?>OpenDyslexic-Italic.woff') format('woff');
            font-weight: normal;
            font-style: italic;
        }
        @font-face {
            font-family: 'Open Dyslexic';
            src: url('<?php echo $font_base; ?>OpenDyslexic-BoldItalic.woff2') format('woff2'),
                 url('<?php echo $font_base; ?>OpenDyslexic-BoldItalic.woff') format('woff');
            font-weight: bold;
            font-style: italic;
        }
    </style>
    <?php
}
add_action('wp_head', 'joshannon_add_custom_fonts');