Archived topic
Uploading Local Fonts Not Working
5 replies · Started by Shaun on July 14, 2021
Hi
Following the steps on I have installed 4 weights of Nunito Sans. I downloaded the fonts from Google and uploaded them via FTP.
I then added the following CSS:
/* nunito-sans-300 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
src: local(''),
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-600 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
src: local(''),
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-700 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
src: local(''),
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-800 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 800;
src: local(''),
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/public_html/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}Next, I added the following PHP:
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Nunito Sans';
return $fonts;
} );In Customiser, the font shows up as the last one in the Systems group. However:
- It shows all the font weights not just the ones I uploaded
- The font that shows in both the previewer and the live site is a serif font, not Nunito Sans
See link in the private area.
Any help would be much appreciated.
Cheers
Shaun
It shows all the weights, not just the ones I uploaded
Hi there,
all of the font URLs in the @font-face are incorrect and are generating 404 errors.
Make sure those URLs point to the exact directory.
The font variants list in the current typography module simple show all possible sizes - its not smart enough to know whether they all exist.
Thanks David
I have changed the urls, removing the public_html. They now download when you put the URL in the address bar.
However, I am still having the same problem.
/*
Theme Name: Starter Child Theme
Theme URI: https://www.websmall.net/
Description: Starter theme for GeneratePress childthemes
Author: Tom Usborne
Author URI: https://tomusborne.com
Template: generatepress
Version: 0.1
*/
/* nunito-sans-300 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
src: local(''),
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-600 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
src: local(''),
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-700 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
src: local(''),
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-800 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 800;
src: local(''),
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://starter.websmall.net/wp-content/themes/starter-theme/fonts/nunito-sans-v6-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Nunito Sans';
return $fonts;
} );Hi Shaun,
I see your site seems to be using a plugin for its optimization. Can you try clearing its cache or disabling it completely and check if it finally works? Makes sure to clear browser cache as well.
I see the request being made here - https://share.getcloudapp.com/12u481mN - and the site's heading looks like it's actually using it.
Thx Elvin
Worked perfectly!
No problem. :D
