Docs

[pdopchev]

Hi guys,

Been trying to have different fonts in one heading and so far it’s been unsuccessful. Want to “spice up” this heading “Web Design & Development” on the following page: http://dopchevproductions.com/ by having one font for “Web Design” and another for “& Development” Is that possible?

Thank you!

p.s. the fonts I was about to use are already imported in the Customizer

/* Fonts For Front Page */
@import url('https://fonts.googleapis.com/css?family=Bungee+Inline|Comfortaa');

CSS rules:
font-family: 'Bungee Inline', cursive;
font-family: 'Comfortaa', cursive;

[Paul R]

Hi,

Yes, that’s possible.

Change Custom Headline content to this

Web Design <span style="font-family: 'Comfortaa', cursive;">& Devolpment</span>

Then add this in the style field of your custom headline element.

font-family: 'Bungee Inline', cursive;

Hope that helps.

[pdopchev]

Hi,

It did lead me on the right path! Should have thought about the <span> element!

After a bit of research on the forum it turned out that the right way to “import” an additional custom font is as follows (in case somebody else is looking for a solution):

1. Add a similar (have to input the font family you want instead of the one I am using) function to your child’s theme functions.php file:

function g_font() {
    wp_register_style('googleFonts', '//fonts.googleapis.com/css?family=Bungee+Inline|Fredericka+the+Great');
    wp_enqueue_style( 'googleFonts');
}

add_action('wp_print_styles', 'g_font');

2. Add a similar (change the font family to the one you desire) line of code to the Customizer:

/* Fonts For Front Page */
@import url('https://fonts.googleapis.com/css?family=Bungee+Inline|Fredericka+the+Great');

3. Set the font family you have chosen in the “style” field of the cornerstone element you want to change:

font-family: 'Bungee Inline', cursive;

Enjoy your day!

[Paul R]

Thanks for sharing. 🙂

[Author]

Posts