[Resolved] Custom fonts different depending on pages

Home Forums Support Custom fonts different depending on pages

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1433757
    Nacho

    Hello Tom,

    WeĀ“ve installed the Manrope font on the website and when using it via Generateblocks the font looks great but in the archive pages and other where there is no Generateblocks the font looks different.

    Take a look at the homepage where it looks nice and at the URL/blog so you can tell the difference.

    Hope you have someway to fix this.

    Thanks a lot and have a good day šŸ™‚

    #1433800
    David
    Staff
    Customer Support

    Hi there,

    i am not seeing any difference between Home and Archives – and the font is being loaded and selected for the archive font.

    Have you tried clearing the browser cache?

    #1434092
    Nacho

    Hello David,

    The difference is quite small but you can notice.

    The thing is also that if you select 300 or 400, etc. weight in the customizer, it does not change or do anything.

    IĀ“ve tried clearing the cache and everything but it does not work.

    Thanks a lot.

    #1434165
    David
    Staff
    Customer Support

    How did you add the font to your site – can you share me the code ?

    #1434951
    Nacho

    Hello David,

    ThatĀ“s the code IĀ“ve added via Code Snippets:

    add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
    function tu_add_google_fonts( $fonts ) {
    	$fonts[ 'Manrope' ] = array( 
    		'name' => 'Manrope',
    		'variants' => array( '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
    		'category' => 'sans-serif'
    	);
    	
    	return $fonts;
    }

    Thanks a lot.

    #1435168
    David
    Staff
    Customer Support

    Odd the Font request for the Archives is different – which means the Customizer CSS is not behaving the same.

    Are you setting the font in the GenerateBlocks Headline > Typography > Settings ?

    #1435257
    Nacho

    Hello David,

    Yes in Generateblocks IĀ“m using those settings but I donĀ“t know it looks different for posts where I donĀ“t use Generateblocks.

    Any idea?

    Thanks a lot.

    #1435286
    David
    Staff
    Customer Support

    Ok – so it looks like its GP customizer is just performing the 400 weight request.

    Try adding this CSS to your style sheet:

    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/manrope/v3/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    #1436638
    Nacho

    Hello David,

    It looks like its working. The website went down due to an attack and I couldnĀ“t check till now.

    Is there anyway to have less code in the CSS or is it a WordPress issue?

    Thanks a lot man.

    #1436646
    David
    Staff
    Customer Support

    We’re planning to rewrite the customize typography controls – which are at fault in this instance, as they rely on individual font variants to be listed by google. When using a variable font they just load the Normal.

    You can trim away any font-sizes in that CSS you don’t need on the non GB build pages.

    #1436829
    Nacho

    Hello David,

    Understood.

    Thanks a lot for your reply and all the help you gave me.

    Have a nice day.

    #1436906
    David
    Staff
    Customer Support

    You’re welcome – glad to be of help

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