[Support request] Implement Custom Font

Home Forums Support [Support request] Implement Custom Font

Home Forums Support Implement Custom Font

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #366386
    Roman

    Hello,

    how i can add a custom font for child theme in a true way.
    I have a fonts folder with my custom fonts.
    example:
    /fonts/Gilroy-Light, Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold, Gilroy-Bold
    /fonts/fonts.css

    @font-face {
    	font-family: 'Gilroy-Light';
    	src: url('./Gilroy-Light.eot');
    	src: url('./Gilroy-Light.eot?#iefix') format('embedded-opentype'),
    		url('./Gilroy-Light.woff') format('woff'),
    		url('./Gilroy-Light.ttf') format('truetype'),
    		url('./Gilroy-Light.svg#Gilroy-Light') format('svg');
    	font-weight: 300;
    	font-style: normal;
    }
    
    @font-face {
    	font-family: 'Gilroy-Regular';
    	src: url('./Gilroy-Regular.eot');
    	src: url('./Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
    		url('./Gilroy-Regular.woff') format('woff'),
    		url('./Gilroy-Regular.ttf') format('truetype'),
    		url('./Gilroy-Regular.svg#Gilroy-Regular') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    
    @font-face {
    	font-family: 'Gilroy-Medium';
    	src: url('./Gilroy-Medium.eot');
    	src: url('./Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
    		url('./Gilroy-Medium.woff') format('woff'),
    		url('./Gilroy-Medium.ttf') format('truetype'),
    		url('./Gilroy-Medium.svg#Gilroy-Medium') format('svg');
    	font-weight: 500;
    	font-style: normal;
    }
    
    @font-face {
    	font-family: 'Gilroy-Semibold';
    	src: url('Gilroy-Semibold.eot');
    	src: url('Gilroy-Semibold.eot?#iefix') format('embedded-opentype'),
    		url('Gilroy-Semibold.woff') format('woff'),
    		url('Gilroy-Semibold.ttf') format('truetype'),
    		url('Gilroy-Semibold.svg#Gilroy-Semibold') format('svg');
    	font-weight: 600;
    	font-style: normal;
    }

    add to function this css

    function gpc_css_stylesheets() {
    	wp_enqueue_style( 'gp_font', get_stylesheet_directory_uri() . '/fonts/fonts.css');
    }
    add_action('wp_enqueue_scripts','gpc_css_stylesheets');

    I want to add this fonts to a customizer with choice font weight.
    For example:
    Ill choice a font family like Gilroy then select a font weight, 300 – Light, 400 – Regular, 500 – Medium, 600 – Semibold.
    What i need to change in fonts.css for working solution ?

    I add this in function to show font in a customizer, but im not sure its true way or not. In this case i need to add all fonts Gilroy-Light, Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold, Gilroy-Bold or just one like Gilroy, then use a font weight ? Or for any font weight use specific name ?

    add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
    function tu_add_system_fonts( $fonts ) {
        $fonts[] = 'Gilroy-Regular';
        return $fonts;
    }
    #366447
    Tom
    Lead Developer
    Lead Developer

    Yes, that looks like the correct method. Since all of the font weights are added using different font files, you would need to add them separately:

    $fonts[] = 'Gilroy-Regular';
    $fonts[] = 'Gilroy-Medium';

    And so on..

    #370656
    Sarah

    Roman, you, my friend are wonderful! This works perfectly and is just what I needed!

    Thank you!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.