[Resolved] Host Local Font – Roboto

Home Forums Support Host Local Font – Roboto

  • This topic has 12 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1325882
    Rick

    Hi there,

    I’m having issues getting my font hosted locally. You made this great guide at https://docs.generatepress.com/article/adding-local-fonts/. I followed each of the steps and I’m frustrated as of why it’s not working. At this point when I look in the customizer at: Customising -> typography -> body -> Font family. The new font family pops up with the name I gave it: “Roboto Local”. Yet when I click on it, the font is a very different look/feel than the roboto I downloaded from google fonts at https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin. It’s also different from the Roboto that’s already loaded in the customizer. My guess is that WordPress is not recognizing the font at all and is taking a default font.

    The steps I’ve performed:
    – At previous link I downloaded ‘regular’, ‘italic’, ‘500’ and ‘700’. The files I’ve downloaded I uploaded to the folder http://excelgorilla.com/wp-content/uploads/2020/06/
    – I uploaded below code into the plugin ‘snippets’ and activated the module:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    	$fonts[] = 'Roboto Local';
    
        return $fonts;
    } );

    – Then I added the below code to the Simple CSS plugin and saved it:

    /* roboto-regular - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: normal;
      font-weight: 400;
      src: url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Roboto'), local('Roboto-Regular'),
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-italic - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: italic;
      font-weight: 400;
      src: url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
      src: local('Roboto Italic'), local('Roboto-Italic'),
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-500 - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: normal;
      font-weight: 500;
      src: url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
      src: local('Roboto Medium'), local('Roboto-Medium'),
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-700 - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: normal;
      font-weight: 700;
      src: url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
      src: local('Roboto Bold'), local('Roboto-Bold'),
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('http://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
    }

    Could you provide me with any indications of what goes wrong. That’d be so helpful!

    Thanks a bunch,
    Rick

    #1326095
    David
    Staff
    Customer Support

    Hi there,

    in your @font-face CSS swap: http: for https:

    #1326150
    Rick

    Hey David,

    Thanks for your quick response. You have a sharp eye. I gave the HTTPS a try. At this point at least the customizer now shows the right Font when I select ‘Roboto Local’. However with the adjustment I ran GTMetrix, and it returns an error for me.

    https://fonts.googleapis.com/css?family=Roboto+Local
    (canceled)
    fonts.googleapis.com

    I notice it at the Waterfall graph:
    https://gtmetrix.com/reports/excelgorilla.com/l87LEepe

    The code used is:

    /* roboto-regular - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: normal;
      font-weight: 400;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Roboto'), local('Roboto-Regular'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-italic - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: italic;
      font-weight: 400;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
      src: local('Roboto Italic'), local('Roboto-Italic'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-500 - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: normal;
      font-weight: 500;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
      src: local('Roboto Medium'), local('Roboto-Medium'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-700 - latin */
    @font-face {
      font-family: 'Roboto Local';
      font-style: normal;
      font-weight: 700;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
      src: local('Roboto Bold'), local('Roboto-Bold'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
    }

    The error suggests that it still uses the Google Font. Is this something you know more about?

    Cheers,
    Rick

    #1326519
    David
    Staff
    Customer Support

    Couple of things:

    1. Make sure there are no curly quotes in your code. They all should be straight: '
    2. Try a completely unique font-family name e.g

    font-family: 'Gorilla';

    #1326567
    Rick

    That solved it David. I changed both the name and the curly quotes. My guess is that it was the curly quotes that caused it not to work.

    It’s much more pleasurable when it takes a bit of sweat to get it right. Thanks for working with me here 🙂 Super happy!

    #1327103
    Rick

    Sorry guys, it seems I was a bit too quick to cheer. I haven’t changed any setting, but the Waterfall at GTMetrix is still showing an error for the google font.

    – So I’ve followed the guide at https://docs.generatepress.com/article/adding-local-fonts/
    – Also I changed the @Font Family to be called ‘Gorilla’ as a unique name.
    – It doesn’t have any curly quotes, but the straight ones.
    – I’m using https:// to reference the files
    – And I’ve selected the System font ‘Gorilla’at typogrophy
    – All other fonts use the ‘inherit font’.

    I’m not sure what else there is. Could this thread be opened again? Thanks again.

    https://gtmetrix.com/reports/excelgorilla.com/abCSsGMb

    for completeness the Simple CSS Code:

    /* roboto-regular - latin */
    @font-face {
      font-family: 'Gorilla';
      font-style: normal;
      font-weight: 400;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Roboto'), local('Roboto-Regular'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-italic - latin */
    @font-face {
      font-family: 'Gorilla';
      font-style: italic;
      font-weight: 400;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
      src: local('Roboto Italic'), local('Roboto-Italic'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-500 - latin */
    @font-face {
      font-family: 'Gorilla';
      font-style: normal;
      font-weight: 500;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
      src: local('Roboto Medium'), local('Roboto-Medium'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    /* roboto-700 - latin */
    @font-face {
      font-family: 'Gorilla';
      font-style: normal;
      font-weight: 700;
      src: url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
      src: local('Roboto Bold'), local('Roboto-Bold'),
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://excelgorilla.com/wp-content/uploads/2020/06/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
    }
    
    /* AUTHOR BOX Markup - for below posts */	
    
    .author-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: 4%;
        margin-top: 35px;
    }
    
    .author-links a {
        font-size: 3em;
        line-height: 0.5em;
        float: right;
    }
    
    .author-box .avatar {
        width: 100px;
        border-radius: 100%;
        margin-right: 30px;
    }
    
    h5.author-title {
        margin-bottom: 0.5em;
    }
    
    */
    

    The PHP Snippet:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    	$fonts[] = 'Gorilla';
    
        return $fonts;
    } );
    #1327244
    David
    Staff
    Customer Support

    Can you confirm what Font is selected in Customizer > Typography > Body?

    #1327277
    Rick

    Hi David,

    It’s set on ‘Gorilla’. I’m not sure if you can see that from your side. I had turned it off for a little bit, but now it’s back on. I’ll leave it ‘on’ for as long as we’re trouble shooting.

    https://gtmetrix.com/reports/excelgorilla.com/oX8efI05

    #1327287
    David
    Staff
    Customer Support

    As you’re not using any Google fonts try the first PHP snippet provided here:

    https://docs.generatepress.com/article/remove-google-fonts/

    It will stop the Google CSS from being generated.

    #1327292
    Rick

    Worth a shot, this is the result:

    https://gtmetrix.com/reports/excelgorilla.com/N8DyHYDZ

    Does that mean it has worked?

    #1327904
    Tom
    Lead Developer
    Lead Developer

    Looks like it – I’m not seeing any requests to Google in your waterfall 🙂

    #1328206
    Rick

    Perfect, many thanks guys!

    #1328273
    David
    Staff
    Customer Support

    Glad we could be of help

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