Lifestyle Pro: Possible to have 2 fonts in Title?

[Asephra]

Hi everyone,

I'm currently using Lifestyle Pro, and in the Site Title, I want to use 2 different fonts (Allura + Playfair Display)

Is there a way to do this?

Right now, it's only allowing me 1 in the CSS and I don't see an option to edit HTML.

Thank you for any assistance!
Alice

http://yoursalutations.com

[Victor Font]

You can, but it requires using the genesis_seo_title filter in functions.php. This is a shell that you can add to the bottom of functions.php. You'll have to figure out the HTML yourself since you have the site hidden behind a coming soon page.

add_filter( 'genesis_seo_title', 'my_custom_title' );
function my_custom_title( $title ) {

    $title = "Create my custom html here";

    return $title;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Asephra]

Hi there Victor, thank you very much for your reply. I've disabled the Coming Soon page to reveal the site in progress.

Do you know what I can do, if there is no area to access the functions.php in my WordPress Dashboard?

Under Appearance, there is only Edit CSS. I don't see any "Theme Files" or "Theme Functions" to choose from.

[Victor Font]

Access the site through ftp and edit the file locally.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Asephra]

Hi there Victor,

I connected the site to an FTP (Filezilla)

And tried editing the functions.php by adding this to the very bottom:

add_filter( 'genesis_seo_title', 'my_custom_title' );
function my_custom_title( $title ) {

    $title = "<h1 class=“site title”>Your <span style="font-family: Playfair Display;">Sal</span>utations</h1>;

    return $title;
}

And in the Edit CSS section, I kept this:

.site-title {
    font-family: 'Allura' !important;
}

However, when I re-saved the Functions.php with the newly added snippet, the site "broke" and produced an error.

Do you know what I did wrong in the snippet?

Thanks!

[Victor Font]

Yes, your quote marks are wrong when building your $title string. You always have to use straight quotes with PHP. You have curly quotes wrapping site title. When you have double quotes in the string itself, you're outer quotes have to be single quotes. You start the string with a double quote and have double quotes in the string. You also didn't terminate the string with the closing quote. The corrected string is below.

$title = '<h1 class="site title">Your <span style="font-family: Playfair Display;">Sal</span>utations</h1>';

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Asephra]

Hi Victor, thank you that worked great 🙂

I was able to get the 2 fonts in 1 site title via this:

$title = '<h1 class="site title"><span style="font-family: Allura; font-size: 30pt;">Your</span> <span style="font-family: Playfair Display;">SAL</span><span style="font-family: Allura; font-size: 30pt;">utations!</span></h1>';

Do you know how I can get that to appear on mobile as well?

Thank you so very much for your help thus far!

[Victor Font]

Use your browser's built-in inspect tool and mobile device simulator to examine the mobile CSS and adjust it accordingly in the media queries.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Asephra]

Hi there Victor,

Thank you again for your help. I realized that having 2 fonts in the Site Title doesn't appear correctly in different environments (it looked great on my desktop, but it got stripped on my laptop etc) so I made it into an image instead.

add_filter( 'genesis_seo_title', 'my_custom_title' );
function my_custom_title( $title ) {

    $title = '<img src="http://yoursalutations.com/wp-content/uploads/2018/01/Your-Salutations-logo-500x102.png">';

    return $title;
}

My new problem is that when on an actual mobile device, the image is TOO small but it looks fine when I toggle on Chrome Inspect and view under various devices.

Do you know why that is?

And how to adjust the image to make it bigger on mobile?

Is it still the Additional CSS using something along the lines of

 @media only screen and (max-width: 640px) 
[enter missing HTML]

Thank you so much.

[Author]

Posts