Tagged: cornerstone
-
AuthorPosts
-
March 13, 2017 at 1:45 pm #1405263
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?March 13, 2017 at 1:49 pm #1405267Thanks 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.
March 14, 2017 at 10:03 am #1406497This reply has been marked as private.March 14, 2017 at 10:58 am #1406629Hi there,
You can select fonts from here:
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.
March 14, 2017 at 1:37 pm #1406924thanks 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.
March 14, 2017 at 7:46 pm #1407385Hi there,
Please check this detailed guide here (https://community.theme.co/forums/topic/how-to-change-font-familysize-in-text-or-custom-headline/#post-758128).
Hope that helps.
March 15, 2017 at 3:16 am #1407697Nope 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.
March 15, 2017 at 6:42 am #1407838Hi 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.
March 15, 2017 at 1:51 pm #1408457I 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.
March 15, 2017 at 10:23 pm #1409069Hi 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="shortcut icon" href="yourimagepathgoeshere" > <?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
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!
March 16, 2017 at 12:21 pm #1409890Brilliant, 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”.
March 16, 2017 at 8:14 pm #1410473Hi 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!
March 16, 2017 at 8:38 pm #1410489March 17, 2017 at 9:30 am #1411032Thanks 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?
March 17, 2017 at 5:56 pm #1411562Hi 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.
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.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.
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.
Your style.css file should look like this now:
Hope it helps, Cheers!
-
AuthorPosts