[Resolved] The best way to add google font to GP child theme local system font

[arabsworks]

Dear Tom,

I try to add google font to GP system fonts using the child theme with the following steps:

STEP1: Add fonts directory in the child theme.

STEP2: Go to google subset fonts here: https://fonts.google.com/?subset=arabic

STEP3: Select the appropriate font which is (Changa) in our case.

STEP4: Go to google webfonts helper and make the CSS code and the fonts files to download from here: http://google-webfonts-helper.herokuapp.com/fonts
———-
/* changa-regular – arabic */
@font-face {
font-family: ‘Changa’;
font-style: normal;
font-weight: 400;
src: url(‘../fonts/changa-v2-arabic-regular.eot’); /* IE9 Compat Modes */
src: local(‘Changa’), local(‘Changa-Regular’),
url(‘../fonts/changa-v2-arabic-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘../fonts/changa-v2-arabic-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘../fonts/changa-v2-arabic-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘../fonts/changa-v2-arabic-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘../fonts/changa-v2-arabic-regular.svg#Changa’) format(‘svg’); /* Legacy iOS */
}
/* changa-700 – arabic */
@font-face {
font-family: ‘Changa’;
font-style: normal;
font-weight: 700;
src: url(‘../fonts/changa-v2-arabic-700.eot’); /* IE9 Compat Modes */
src: local(‘Changa Bold’), local(‘Changa-Bold’),
url(‘../fonts/changa-v2-arabic-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘../fonts/changa-v2-arabic-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘../fonts/changa-v2-arabic-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘../fonts/changa-v2-arabic-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘../fonts/changa-v2-arabic-700.svg#Changa’) format(‘svg’); /* Legacy iOS */
}
—————

STEP5: Download and add fonts files to the child theme fonts directory.

STEP6: Add the above CSS code to: generatepress_child//fonts/fonts.css

STEP7: Add to the child theme functions.php the following code:
—————-
function gpc_css_stylesheets() {
wp_enqueue_style( ‘gp_font’, get_stylesheet_directory_uri() . ‘/fonts/fonts.css’);
}
add_action(‘wp_enqueue_scripts’,’gpc_css_stylesheets’);

add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘Changa’;
$fonts[] = ‘Changa-Regular’;
$fonts[] = ‘Changa-Bold’;
return $fonts;
—————–

STEP8: Try to use the font from GP customizer system fonts list :

THE [Changa] font loaded and showing in system list but if I select the font from the list GP customizer not reflect the FONT TEXT for that font, so where you think I went wrong with my steps any help for my and for GP fellow members.

With Many Thanks,
ArabsWorks

[Tom]

Hi there,

Can you try making it so the src in the CSS are full URLs pointing to the font files? Currently they’re relative URLs and might not work.

[arabsworks]

Thanks Tom,

Ok I try with full URLs :
——————————
/* changa-regular – arabic */
@font-face {
font-family: ‘Changa’;
font-style: normal;
font-weight: 400;
src: url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.eot’); /* IE9 Compat Modes */
src: local(‘Changa’), local(‘Changa-Regular’),
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.svg#Changa’) format(‘svg’); /* Legacy iOS */
}
/* changa-700 – arabic */
@font-face {
font-family: ‘Changa’;
font-style: normal;
font-weight: 700;
src: url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-700.eot’); /* IE9 Compat Modes */
src: local(‘Changa Bold’), local(‘Changa-Bold’),
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-700.svg#Changa’) format(‘svg’); /* Legacy iOS */
}

—————————-
Same thing still the font loaded and showing in the system list but if I select the font from the list GP customizer not reflect the FONT TEXT for that font to show correctly on the screen.

[Tom]

Can you link me to the page?

[arabsworks]

Sorry Tom, the site locked in a staging area but you can replicate the problem with the above steps or tell me if you have another method to implement the code.

[Tom]

The above method should work, so it’s not really about replicating. It’s likely there’s just a small error somewhere which I’d have to see.

Any chance you can send me login details?: https://generatepress.com/contact/

[arabsworks]

Sorry Tom ,still the site locked in a staging area so if you can I appreciate the effort to review the code one more time and see if there is some enhancement or change you can do to make it work.

With Many Thanks,

[Tom]

From what I can see, your CSS is correct.

When you put the URL to the fonts into your browser – does it download the font file?

[arabsworks]

YES when I put the URL to the fonts into the browser – it does download the font file

Example like:
http://www.domain.com/wp-content/themes/generatepress_child/fonts/changa-v2-arabic-regular.ttf

[Tom]

And your CSS is in a separate file? Have you tried adding it into something like Simple CSS?

[arabsworks]

All steps are listed above so that the rest of the members can benefit from solving the problem

So here is the step for the CSS:
STEP6: Add the above CSS code to: generatepress_child//fonts/fonts.css

[arabsworks]

I confirm the code work with Simple CSS. With Thanks

Question Tom,
Why the wp_enqueue_style not working with:
wp_enqueue_style( ‘gp_font’, get_stylesheet_directory_uri() . ‘/fonts/fonts.css’);

and work with the main style.css after using Simple CSS. any logic answer!!!

So for all GP members please download Simple CSS plugin from here and paste the code from STEP4 into Simple CSS plugin.

Also if you use SSL the src in the CSS with full URLs pointing to the font files preferred to be :
//www.domain.com/wp-content/themes/generatepress_child/fonts/

instead of:
https://www.domain.com/wp-content/themes/generatepress_child/fonts/

[Tom]

That means that the URL wp_enqueue_style was outputting wasn’t correct.

You can check by viewing your source and looking for the output of that function, then manually trying the URL it’s using.

[Author]

Posts