- This topic has 12 replies, 3 voices, and was last updated 3 years, 10 months ago by David.
-
AuthorPosts
-
June 12, 2020 at 11:01 pm #1325882Rick
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,
RickJune 13, 2020 at 4:05 am #1326095DavidStaffCustomer SupportHi there,
in your @font-face CSS swap:
http:
forhttps:
June 13, 2020 at 5:33 am #1326150RickHey 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.comI notice it at the Waterfall graph:
https://gtmetrix.com/reports/excelgorilla.com/l87LEepeThe 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,
RickJune 13, 2020 at 9:16 am #1326519DavidStaffCustomer SupportCouple 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.gfont-family: 'Gorilla';
June 13, 2020 at 9:42 am #1326567RickThat 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 #1327103RickSorry 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 #1327244DavidStaffCustomer SupportCan you confirm what Font is selected in Customizer > Typography > Body?
June 14, 2020 at 6:01 am #1327277RickHi 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.
June 14, 2020 at 6:16 am #1327287DavidStaffCustomer SupportAs 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 #1327292RickWorth 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 #1327904TomLead DeveloperLead DeveloperLooks like it – I’m not seeing any requests to Google in your waterfall π
June 15, 2020 at 2:45 am #1328206RickPerfect, many thanks guys!
June 15, 2020 at 3:37 am #1328273DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.