[Resolved] Adding custom font via FTP Child theme

[Bob]

Hi again guys,

I have read your instructions on this link https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font and I have followed some threads on this forum, but once I get to the bit about making this work, the trail seems to go cold.

I simply want to add the Google font Saira_Semi_Condensed. I have downloaded it and I have created a folder in my Child theme called ‘Fonts’. I then uploaded the Saira_Semi_Condensed file to FTP via CPanel File Manager.
According to the instructions on the above link, that should be it and I quote “Note: If you’re comfortable with uploading files to your server via FTP, you can skip this step and simply upload your font files to your child theme”.

This did not work, so I have read your forum and found that there seems to be some code I need to add to Additional CSS in Customiser.

I have tried several different methods to add the codes described on you forum and https://css-tricks.com/snippets/css/using-font-face/, but nothing is working.

The Font files I have only has .ttf files, so all these WOFF and WOFF2 files appear to be irrelevant. So I have tried to add this code;

@font-face {
font-family: ‘SairaSemiCondensed’;
src: url(‘https://bosstorage.com.au/wp-content/themes/generatepress_child/fonts/SairaSemiCondensed.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}

Please can you explain what I am getting wrong.
Thanks in advance.

[David]

Hi there,

you need to continue from here:

https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

Let us know how you get on 🙂

[Bob]

Hey David,
OK, so I have done all of this. I have added the following CSS from the Google Webfonts Helper to the Child Theme Stylesheet;

/* saira-semi-condensed-regular – latin */
@font-face {
font-family: ‘Saira Semi Condensed’;
font-style: normal;
font-weight: 400;
src: url(‘https://www.bosstorage.com.au/wp-content/themes/generatepress-child/fonts/saira-semi-condensed-v5-latin-regular.eot’); /* IE9 Compat Modes */
src: local(‘Saira SemiCondensed Regular’), local(‘SairaSemiCondensed-Regular’),
url(‘https://www.bosstorage.com.au/wp-content/themes/generatepress-child/fonts/saira-semi-condensed-v5-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://www.bosstorage.com.au/wp-content/themes/generatepress-child/fonts/saira-semi-condensed-v5-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://www.bosstorage.com.au/wp-content/themes/generatepress-child/fonts/saira-semi-condensed-v5-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.bosstorage.com.au/wp-content/themes/generatepress-child/fonts/saira-semi-condensed-v5-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.bosstorage.com.au/wp-content/themes/generatepress-child/fonts/saira-semi-condensed-v5-latin-regular.svg#SairaSemiCondensed’) format(‘svg’); /* Legacy iOS */
}

I then added this to the Customiser Additional CSS;

add_filter( ‘generate_typography_default_fonts’, function( $fonts ) {
$fonts[] = ‘Saira Semi Condensed’;

return $fonts;
} );

In the Child Theme Fonts folder within CPanel File Manager, I have now added every conceivable file associated with the Saira Semi Condensed font from the Google webfont helper download to the Google Fonts Download.

Still I do not see the font?

[David]

The add_filter code is PHP.
This needs to be added to your child themes functions.php

https://docs.generatepress.com/article/adding-php/

[Bob]

That was it David, you’re a legend.
All working now.
Thanks

[David]

Glad to hear that

[Almog]

i did all of that and its working, but there is a delay in the font’s loading time.

[Almog]

how can i fix that?
and also do me a favor… add assistant to the built in fonts of the theme. it is one of the most popular and common fonts out there.

[Elvin]

i did all of that and its working, but there is a delay in the font’s loading time.

There are many factors why this could happen. We may have to check your site to be sure which way to point you to.

Can you open a new topic for this? So you can use the private information text field to provide us the site details. Thank you.

and also do me a favor… add assistant to the built in fonts of the theme. it is one of the most popular and common fonts out there.

Did you mean this font? https://fonts.google.com/specimen/Assistant

You can add it with a PHP snippet.

You may refer to this documentation on how to do it.
https://docs.generatepress.com/article/customizing-the-google-font-list/

Example:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'assistant' ] = array( 
		'name' => 'Assistant',
		'variants' => array( '200', '300', '400', '500', '600', '700' , '800' ),
		'category' => 'serif'
	);

	return $fonts;
}

[Almog]

Great! i added the google font and it works perfectly. thanks man!

[Elvin]

No problem. 😀

[Author]

Posts