Archived topic
Site title with two font-weight
3 replies · Started by Albert on February 24, 2022
Hello, I would like to know how to make the title of the site, in the upper left, have two types of font-weight. I would like the words "Guía de" to be in a font-weight: normal (or 400) and "Amsterdam" to be bold (or 700), like on this attached page:
https://www.viajaramsterdam.com/
My site is https://guia.amsterdam .
Thank you very much
Hi there,
you can use a PHP Snippet to add the necessary HTML to do that eg.:
add_filter( 'generate_site_title_output', function( $output ) {
$titleHTML = 'Guía de <span class="site-title-accent">Amsterdam</span>';
return sprintf(
'<%1$s class="main-title" itemprop="headline">
<a href="%2$s">%3$s</a>
</%1$s>',
( is_front_page() && is_home() ) ? 'h1' : 'p',
esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
$titleHTML
);
});
This dic explains how to add PHP:
https://docs.generatepress.com/article/adding-php/
Now you can:
1. Set the Customizer > Typography > Site Title font weight to 400.
2. Add this CSS to style the second text to 900:
.main-title .site-title-accent {
font-weight: 900;
}
thank you very much!
You're welcome