Possible to change font?

elliesatt
(@zee300)

6 months, 1 week ago

Hi there

Firstly, thanks for creating such a well-made plugin – exactly what I need!

I was wondering what’s the best way to go about changing the font of the generated avatars? Looking at the plugin the font seems to be NotoSans – how can I change this to, say, Barlow?

Thanks in advance!

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Ariel
(@arielhr1987)

6 months, 1 week ago
Hi @zee300

Thanks for the kudos

You could use something like this to use you own font.
Just set the path the correct path to your font and delete your current “letter-avatar” folder in uploads dir (the plugin will generate it for you).
Let me know if it works for you.
```
function my_image_font( $font, $data ) {
	$font = __DIR__ .'/Barlow-Regular.ttf';

	return $font;
}
add_filter( 'leira_letter_avatar_image_font', 'my_image_font', 10, 2 );
```
Kind regards
Thread Starter elliesatt
(@zee300)

6 months, 1 week ago
Awesome, thanks so much!

So if I wanted to point to a font folder in my child theme, it should be something like this? I’m not sure if the path directory is correctly defined in my code below:
```
function my_image_font( $font, $data ) {
	$font = __DIR__ .'html/wp-content/themes/child_theme/fonts/Barlow-SemiBold.ttf';

	return $font;
}
add_filter( 'leira_letter_avatar_image_font', 'my_image_font', 10, 2 );
```
Plugin Author Ariel
(@arielhr1987)

6 months, 1 week ago
avoid pointing to theme as you might want to delete the theme at some point and you will gonna break letter avatar.
Put the ttf file in wp-content/uploads/ directory and use this code.
```
function my_image_font( $font, $data ) {
	$uploads = wp_get_upload_dir();
	$uploads = $uploads['basedir'];

	$font = $uploads . '/Barlow-SemiBold.ttf';

	return $font;
}
add_filter( 'leira_letter_avatar_image_font', 'my_image_font', 10, 2 );
```
Thread Starter elliesatt
(@zee300)

6 months, 1 week ago
It doesn’t seem to work for me – I’ve put the font file in html/wp-content/uploads/Barlow-SemiBold.ttf and pasted your exact code in Code Snippets.

I then deleted the Letter Avatar folder in /uploads – it’s regenerating, but still regenerating in the Noto font.

Am I doing something wrong somewhere?

Thanks for your help on this by the way!
- This reply was modified 6 months, 1 week ago by elliesatt.
Thread Starter elliesatt
(@zee300)

6 months, 1 week ago

Thoughts? I’m a little bit at a loss here – apart from renaming my font file to replace the original, but I don’t think that’ll survive a plugin update… Thanks!

Plugin Author Ariel
(@arielhr1987)

5 months, 4 weeks ago

Did you remove the avatar folder in uploads directory? Otherwise image wont be regenerated

Thread Starter elliesatt
(@zee300)

5 months, 3 weeks ago

Yes I did – it just regenerates in Noto again.

Am I executing the code right? I’m using Code Snippets (https://wordpress.org/plugins/code-snippets/) to insert the code you gave me.

brynzovskii
(@brynzovskii)

3 months, 3 weeks ago

@arielhr1987 Looks like it does not work using svg format. Inline set of the font-family rule has strict number of fonts applied to svg that is used after avatar is rendered.
font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif;
Would be great to have it dynamic as well.
Plugin Author Ariel
(@arielhr1987)

3 months, 2 weeks ago
@brynzovskii
this snippet does not work for svg format.
To change the svg you need to use “leira_letter_avatar_image_content” filter.
This should do the trick.
```
function change_svg_font($avatar){
	$current = " -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;";
	$replace = "Your Font";
	$avatar = str_replace($current, $replace, $avatar);
	return $avatar;
}

add_filter( 'leira_letter_avatar_image_content', 'change_svg_font', 10, 2);
```
Any further questions please open a new support thread.