[TagdogParticipant]

How do I change a particular piece of text or custom headline to a different font family or size. I found where I can change the whole body of text in a particular element using the Style area in Cornerstone. But, I do no think I did it correct. text-transform: capitalize; font-size: 22px;
It is no longer responsive to mobile, Can I just highlight a word or phrase and put in some shortcode to do this? I tried a bunch of things but nothing worked. Do I have to add Google Fonts somehow? Are all the Google fonts I see under Customizer already loaded
It would be nice to be able to emphasize a word or phrase in a particular string of text bu changing Family, Style, size and not affect the rest of the body. Is there a good plugin for this?

[RupokMember]

Hi there,

Thanks for writing in! To style a specific element, you can select the element and add inline CSS to the style field – http://prntscr.com/9t0m78

If you already enabled the Custom Google Font from Customizer > Typography then you can decalre the font-family too.

Cheers!

[TagdogParticipant]

Thanks for that. I can capitalize or lower case and change size but I cannot change family

I tried font-family and get no results,
text-transform: capitalize; font-family: ‘Lobster’;

When I go to Customizer > Typography, all I see is Google Font Subsets On/Off I tried turning that on and nothing changed except it gave me options for turning on Cyrillic, Greek or Vietnamese. Am I missing something? I do not see where you can enable Custom Google Font.

[FriechModerator]

Hi There,

On Customizer under the Typography panel you should see a drop down list of fonts.

If you did not set the ‘Lobster’ on any of those drop down, then you need to request the ‘Lobster’ font first.

You can add this under Custom > JavaScript in the Customizer.

 WebFontConfig = {
    google: { families: [ 'Lobster::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

Or if you have a child theme, you can add this on your child theme’s functions.php file.

add_action('wp_head','lobster_font');
function lobster_font () { ?>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<?php }

Or this on your child theme’s style.css file

@import url(https://fonts.googleapis.com/css?family=Lobster);

Any of those 3 methods should be fine. After that add this on your custom css

.lobster {
    font-family: 'Lobster' !important;
    font-style: normal;
    font-weight: 400;
}

And apply the class lobster to any text or headline that you want to be emphasize (in lobster font).

Hope it helps, Cheers!

[TagdogParticipant]

Thanks for your help. I requested custom font under javascript, customizer and it worked. But I cannot change font by putting font name in Class. I have to put this in Style text-transform: capitalize; font-family: lobster;

I could change the font family like this but I cannot change the font color? I tired putting the color change in the style but it just does not work, I can change all the Cusom Headlines by changing the Body Fond under Customizer. But how do I change font color in a particular element?

[ZeshanMember]

Hi there,

Adding the inline style to change color should work for individual element. Can you provide us the URL of page in question so we can take a closer look to the issue?

Thank you!

[TagdogParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

I’ve checked your site and by manually adding color inline CSS e.g., color: #000, it works just fine. Could you try adding this CSS property again and seeing if it helps? If it doesn’t, please provide us with your WordPress login credentials so we can take a closer look to the issue. Don’t forget to select Set as private reply to ensure your data remains hidden from other users.

Thanks!

[TagdogParticipant]

Okay, Now I feel dumb. I was just not putting it in correctly. Works fine. Got it!

Thanks!

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Have a great day! 🙂

[Author]

Posts