Font style change while wordpress theme development

Question

While converting HTML and CSS to wordpress, I use following code, I can't retain my old font style in HTML page. When I use get_theme mod() I lose my old font style. What to do now? I have posted my code in function of functions.php below

//popular course
$wp_customize->add_section('lwp_popular_course', array(
    'title' => 'Popular Course Edit'));

$wp_customize->add_setting('lwp_popular_courses_heading', array(
    'default' => 'Popular Courses'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular_courses_control', array(
        'label' => 'Popular Courses',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_courses_heading',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_courses_heading', array(

    'selector' => 'span#addpopularcourse',
));

$wp_customize->add_setting('lwp_popular_1', array(
    'default' => 'SSC CGL /CHSL'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular1_control', array(
        'label' => 'Popular Courses1',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_1',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_1', array(

    'selector' => 'span#addpopularcourse1',
));

$wp_customize->add_setting('lwp_popular_image_1');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage1_control', array(
        'label' => 'Image1',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_1',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_1', array(

    'selector' => 'span#addpopularimage1',
));

$wp_customize->add_setting('lwp_popular_2', array(
    'default' => ' BANK PO/CLERK '));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular2_control', array(
        'label' => 'Popular Courses2',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_2',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_2', array(

    'selector' => 'span#addpopularcourse2',
));

$wp_customize->add_setting('lwp_popular_image_2');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage2_control', array(
        'label' => 'Image2',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_2',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_2', array(
    'selector' => 'span#addpopularimage2',
));

$wp_customize->add_setting('lwp_popular_3', array(
    'default' => 'PSC'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular3_control', array(
        'label' => 'Popular Courses3',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_3',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_3', array(
    'selector' => 'span#addpopularcourse3',
));

$wp_customize->add_setting('lwp_popular_image_3');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage3_control', array(
        'label' => 'Image3',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_3',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_3', array(
    'selector' => 'span#addpopularimage3',
));

$wp_customize->add_setting('lwp_popular_4', array(
    'default' => ' RAILWAY'));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,
    'lwp_popular4_control', array(
        'label' => 'Popular Courses4',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_4',
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_4', array(
    'selector' => 'span#addpopularcourse4',
));

$wp_customize->add_setting('lwp_popular_image_4');
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize,
    'lwp_popularimage4_control', array(
        'label' => 'Image4',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_image_4',
        'height' => 135,
        'width' => 240,
    )));
$wp_customize->selective_refresh->add_partial('lwp_popular_image_4', array(
    'selector' => 'span#addpopularimage4',
));

HTML page is given below. When I use get_theme_mod() all font styles get distorted.

distorted original

                <div id="course-carousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_1'));?>" alt="Avatar" class="edufair-related-course-image">
                                            <div class="edufair-related-course-middle">
                                            </div>
                                        </div>
                                        <div class="related-course-content">

                                            <a href="#" class="">
                                                <h3>
                                                    <span id="addpopularcourse1">
                                                    <?php echo get_theme_mod('lwp_popular_1');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <span id="addpopularimage1"> 
                                                <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_2'));?>                                                         " alt="Avatar" class="edufair-related-course-image"></span>
                                            <div class="edufair-related-course-middle">

                                            </div>
                                        </div>

                                            <a href="#" class="">
                                                <h3>
                                                    <span id="addpopularcourse2">
                                                    <?php echo get_theme_mod('lwp_popular_2');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_3'));?>" alt="Avatar" class="edufair-related-course-image">
                                            <div class="edufair-related-course-middle">

                                            </div>
                                        </div>

                                        <div class="related-course-content">

                                            <a href="#" class="">
                                                <h3>
                                                <span id="addpopularcourse4">
                                                    <?php echo get_theme_mod('lwp_popular_3');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="edufair-related-course">
                                        <div class="edufair-related-course-overlay">
                                            <img src="<?php echo wp_get_attachment_url(get_theme_mod('lwp_popular_image_4'));?>" alt="Avatar" class="edufair-related-course-image">
                                            <div class="edufair-related-course-middle">

                                            </div>
                                        </div>

                                        <div class="related-course-content">

                                            <a href="#" class="">
                                                <h3>
                                                <span id="addpopularcourse4">
                                                    <?php echo get_theme_mod('lwp_popular_4');?>
                                                    </span>
                                                </h3>
                                            </a>


                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>



                    </div>

                </div>
            </div>
        </div>

Answer 1

Did you add wp_head ?

This hook allows you to output custom-generated CSS so that your changes show up correctly on the live website.

https://codex.wordpress.org/Theme_Customization_API