Archived topic

Host Local Font - Roboto

12 replies · Started by Rick on June 12, 2020

Viewing posts 1–13 of 13

June 12, 2020 at 11:01 pm #1325882

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

June 13, 2020 at 4:05 am #1326095

Hi there,

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

June 13, 2020 at 5:33 am #1326150

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

June 13, 2020 at 9:16 am #1326519

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

June 13, 2020 at 9:42 am #1326567

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!

June 14, 2020 at 2:04 am #1327103

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;
} );

June 14, 2020 at 5:43 am #1327244

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

June 14, 2020 at 6:01 am #1327277

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

June 14, 2020 at 6:16 am #1327287

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.

June 14, 2020 at 6:23 am #1327292

Worth a shot, this is the result:

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

Does that mean it has worked?

June 14, 2020 at 4:19 pm #1327904

Looks like it - I'm not seeing any requests to Google in your waterfall :)

June 15, 2020 at 2:45 am #1328206

Perfect, many thanks guys!

June 15, 2020 at 3:37 am #1328273

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.