Black Friday! Get up to 25% off GP Premium! Learn more ➝

[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
  • #366386


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

    @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');

    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;
    GeneratePress 1.4
    GP Premium 1.4.2
    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..


    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.