• Resolved nanny7

    (@nanny7)


    Hi when I try to see the fonts they are not working for Divi and the child theme I have created. This is the @font-face

    
    @font-face {
    	font-family: 'as_speedwayregular';
    	src: url('fonts/ays_speedway_font_by_angelesart-webfont.woff2') format('woff2'), url('fonts/ays_speedway_font_by_angelesart-webfont.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
    	font-display: fallback;
    }
    

    For Divi it has its own @font-face as well. On GTMetrixs it shows they are 404. I tried to add it into the ignored files but that didn’t work.
    I am using WP-hide to change the folder names, will that make any difference? Everything works except for the @font-face.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter nanny7

    (@nanny7)

    Hi I firstly put this in the child theme functions and it worked:

    function eut_child_theme_print_custom_fonts() {
    ?>
    <style type="text/css">
        @font-face {
            font-family: 'A&S Speedway';
            src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/A&S Speedway.eot');
            src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/A&S Speedway.eot?#iefix') format('embedded-opentype'),
            url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/A&S Speedway.woff2') format('woff2'),
            url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/A&S Speedway.woff') format('woff'),
            url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/A&S Speedway.ttf') format('truetype'),
            url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/A&S Speedway.svg#wf') format('svg');
        }
    	@font-face {
    	font-family: 'ETmodules';
    	src:url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/modules.eot');
    	src:url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/modules.eot?#iefix') format('embedded-opentype'),
    		url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/modules.woff') format('woff'),
    		url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/modules.ttf') format('truetype'),
    		url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/modules.svg#et-modules') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    
    @font-face {
    	font-family: 'etbuilder';
    	src:url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/builder.eot');
    	src:url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/builder.eot?#iefix') format('embedded-opentype'),
    		url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/builder.woff') format('woff'),
    		url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/builder.ttf') format('truetype'),
    		url('<?php echo get_template_directory_uri(); ?>/core/admin/fonts/builder.svg#et-builder') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    </style>
    <?php
    }
    add_action( 'wp_head', 'eut_child_theme_print_custom_fonts' );
    

    But then in edge and chrome the styles were missing from the child stylesheet with anything for @font-face or url.
    So then I removed the above in the functions and had the inline in header and footer and it worked. Is this the best method to use?

    Thread Starter nanny7

    (@nanny7)

    But now the load time has gone from 3.9 seconds to 16.3 not too good.

    Thread Starter nanny7

    (@nanny7)

    I think it is an issue because I am using WP-hide to rename the wp-content folder, is there a way for your plugin to acknowledge the new name?

    Plugin Author Raul P.

    (@alignak)

    Please check if you are using any @import rules on css, as those usually cause trouble.
    Those rules should be removed and instead, you should enqueue the file it links to.

    If I remember correctly, Divi child themes use import on the child css file to include the parent style. Then if you try to enqueue it, they change it so it includes the style.dev.css version (!)… but either way, that will break.

    For the fonts it should be working fine, but I haven’t tested it with wp hide.
    You can try to disable it first and see if that is the reason.

    For the paths, ou can either use absolute paths, or relative paths to the root of your site url, ie:

    @font-face {
    	font-family: 'as_speedwayregular';
    	src: url('/wp-content/path/to/your/fonts/ays_speedway_font_by_angelesart-webfont.woff2') format('woff2'), url('/wp-content/path/to/your/fonts/ays_speedway_font_by_angelesart-webfont.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
    	font-display: fallback;
    }

    obviously, replace wp-content with the correct path and double check on chrome if the fonts are accessible on that url.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Divi font and child css font not working’ is closed to new replies.