Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1405263

    iamwithU
    Participant

    Hello,
    I like to change the font of my tagline on my Home page – only the slogan right on top of Home page. I like to make it more stylish & attractive.

    Before I try this, may I know:

    a) what are the ways to do it? I don’t know coding.
    b) where do I go to explore the various font styles?

    #1405267

    Joao
    Moderator

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    #1406497

    iamwithU
    Participant
    This reply has been marked as private.
    #1406629

    Jade
    Moderator

    Hi there,

    You can select fonts from here:

    https://fonts.google.com/

    When you have chosen the font, kindly let us know so that we could give you further instructions on how to set it on the slogan.

    Thank you.

    #1406924

    iamwithU
    Participant

    thanks Jade.
    I like the font “Lobster”. I like some alphabets of the tagline to be in white, and some to be in red color.

    Please let me know if I were to change to another font later, where should I do the amendment. I don’t know coding yet.

    #1407385

    Darshana
    Moderator
    #1407697

    iamwithU
    Participant

    Nope that didn’t help.

    I have “man” inside the “class” box already. But even when I removed the “man” and have “lobster” inside, the font of the custom headline did not change. I also tried putting “lobster” before and after “man” each separated by comma. Neither worked.

    What about changing the color? I want some alphabets of the headline in red color.

    #1407838

    Christopher
    Moderator

    Hi there,

    Please separate classes with space.

    e.g:

    man lobster

    Then add following code in customizer :

    .lobster{
    font-family:font-family: 'Lobster', cursive;
    }

    To change color wrap headline within span tags :

    <span style="color:red;">red</span><span style="color:#fff;">white</span>

    Hope it helps.

    #1408457

    iamwithU
    Participant

    I followed what you said but the font of my tagline remained the same – nothing changed.

    Also where do I add the coding to change color? Is it also in customiser under “global css”? I only wanted one alphabet in the word to be in red color.

    #1409069

    Friech
    Moderator

    Hi There,

    Follow this instruction thoroughly and you’ll be good. First please edit your child theme’s style.css file (you can do this either via FTP or Appearance > Editor).

    Please remove this on your child theme style.css file.

    function my_favicon() { ?>
    <link rel=&quot;shortcut icon&quot; href=&quot;yourimagepathgoeshere&quot; >
    <?php }
    add_action('wp_head', 'my_favicon');

    That code is not a CSS.

    Then add this code on your style.css file instead.

    @import url('https://fonts.googleapis.com/css?family=Lobster');
    
    .lobster {
    	font-family: 'Lobster', cursive !important;
    }

    You can’t use the font lobster unless you have this code on your child theme’s style.css.

    Now to apply the font lobster on the Custom Headline just add a class lobster on it.

    Now regarding the different color of a text on a single word. Lets have the Deliciously Healthy as example since you did not specify what is your tagline and what color a letter should be. Let say I want the D to be red and the H to be a blue, you can code that like this:

    <span style="color:red;">D</span>eliciously <span style="color:blue;">H</span>ealthy


    screenshot

    Notice what I did there, I wrapped the D and H letter with a <span> tag and style it.

    Then before you preview the page, please clear your browser’s cache so your browser will serve you the changes.

    Have a nice day, Cheers!

    #1409890

    iamwithU
    Participant

    Brilliant, Friech! It works beautifully now.

    I’m so so grateful to you for patiently guiding me thro’ – you told me exactly where to add the codes and explained why. Thus I was able to learn from this experience, and could apply it to other wording. Very kind of you indeed. How can I convey my appreciation & commendation to your supervisor?

    Still on the tagline, you’ll notice a strange line or double dash before and after the wording of the tagline. This line appears differently in length on my 3 devices – the laptop, iPad and mobile phone. What is this shadowy line and how can I remove it?

    This funny line also appears before and after another custom headline at the bottom of the Home page – “A Healthier Choice”.

    #1410473

    Rad
    Moderator

    Hi there,

    Please add this CSS as well,

    
      .h-custom-headline.accent span > span:before, .h-custom-headline.accent span > span:after {
      display: none !important;
      }

    The <span> is the container of accents (eg. line) and adding more <span> will add more lines. This CSS should fixed double accents.

    Thanks!

    #1410489

    Friech
    Moderator

    Hi There,

    Thank you for the kind words, we are just happy to help you with this. But if you can rate the X|Theme in ThemeForest with 5 stars that would be much appreciated.

    Regarding the strange line, that is the Headline accent option. You can simple turn that off.


    screenshot

    Cheers!

    #1411032

    iamwithU
    Participant

    Thanks again Friech, for teaching me something new. I guess I’ve been diving into X without fully understanding the basics. Hence my frustations 🙁 and gratitude for an expert who is patient to teach me a thing or 2.

    Back to the font, what if I want to change from “lobster” to say “Niconne”. Do I have to remove the “lobster” coding to the child theme style.css file? I tried substituting the word “lobster” with “Niconne” there. Then added “Niconne” to the class for the particular headline. But the result is a font that is not in italics, not cursive nor anything like what I saw in the Google font page.

    What should be the correct step?

    #1411562

    Friech
    Moderator

    Hi There,

    Its not necessary to remove the “lobster” font you might need that in other cases, but if you want you simple erase that from your child theme’s style.css file.

    To add another Google Font, first navigate to https://fonts.google.com search for the font (Niconne) that you need. Hit the add button that correspond to it.


    screenshot

    You should then able to see a # Family Selected panel on the bottom of your browser. Expand that and click the @IMPORT tab. Then copy just the:

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

    Yes, don’t include the <style> and </style> tag.


    screenshot

    You can add that just below the Lobster @import statement:

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

    Then lets write the class niconne so we can apply it like the lobster font. Copy the CSS rule provided by Google to use the font.


    screenshot

    Open/edit your child theme’s style.css file at the bottom write,

    .niconne {
    <!-- PASTE THE CSS RULE HERE -->
    }

    Replace the string <!-- PASTE THE CSS RULE HERE --> with the rule you copied from Google and append it with !important to make it an absolute rule.

    .niconne {
    font-family: 'Niconne', cursive !important;
    }

    Then to apply the font on a text or headline just add a class niconne on it.


    screenshot

    Your style.css file should look like this now:


    screenshot

    Hope it helps, Cheers!