Documentation > Developers > Filter Examples > Use Custom, Self-Hosted Fonts

Use Custom, Self-Hosted Fonts

If you want to use self-hosted fonts, you can use the following snippet.

Requirement: picu Pro needs to be installed and active.

For this example we assume that the font files are inside a fonts folder inside your theme folder. Adjust as needed.

 */
function my_custom_picu_styles( $custom_styles ) {
	ob_start();
?>	
	@font-face {
		font-family: 'source_sans_pro';
		src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/sourcesanspro-regular.woff2') format('woff2'), url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/sourcesanspro-regular.woff') format('woff');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}
	
	@font-face {
		font-family: 'source_sans_pro';
		src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/sourcesanspro-bold.woff2') format('woff2'), url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/sourcesanspro-bold.woff') format('woff');
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}
	
	body {
		font-family: 'source_sans_pro';
	}

<?php
	return $custom_styles . ob_get_clean();
}

add_filter( 'picu_brand_customize_styles', 'my_custom_picu_styles' );Code language: PHP (php)

Need help?

If you couldn’t find what you were looking for and need more assistance, please get in touch with us directly and we’re happy to help.