Tagged: @font-face, Font issues, font-family, heading font
-
AuthorPosts
-
March 5, 2015 at 11:14 am #406329
I am trying to figure out how to use different fonts in one sentence using span tags and styles. The font that I want to list is in the google drop down but for some reason it will not take during an inline style.
I have tried the following…
<span style=”color: #000000; font-family: ‘Paprika’;”>In fact, you are determined to do it. You will stop at nothing.</span>
<span style=”color: #000000; font-family: “Paprika”;”>In fact, you are determined to do it. You will stop at nothing.</span>
<span style=”color: #000000; font-family: Paprika;”>In fact, you are determined to do it. You will stop at nothing.</span>
As soon as I save the page, the font-family completely disappears. It is driving me nuts. I also added fonts with the @font-face and none of those are working on my headers because the advanced editor font family doesn’t list them. And I don’t know how to get my headings to change font family.
This is the code I am using in the custom.css sheet:
/** Heading Font Styles **/
h2,h6 {
font-family: ‘champagne__limousinesregular’, sans-serif !important;
}h3,h5 {
font-family: ‘High Tower Text’, sans-serif !important;
}Also, I would like to change in the middle of a sentence, such as:
In fact, you are <span style=”color: #000000; font-family: ‘Dancing Script’;”>determined<span> to do it. You will stop at nothing.
That doesn’t work either. Please help.
Thank you!
March 5, 2015 at 12:40 pm #406357Hey vadesign!
Please try to import the font in your Quick CSS and use !important after:
@import url(https://fonts.googleapis.com/css?family=Paprika); h1, h2{ font-family: 'Paprika', cursive !important; }
Best regards,
RikardMarch 5, 2015 at 5:50 pm #406548First, thank you for your quick reply.
Quick Question:
What about the span tags? Why don’t those work?March 6, 2015 at 6:02 am #406811Hey!
Not sure, are you sure you imported the font correctly? Also, try !important after your CSS declaration to see if that helps.
A tip if you are going to use a font often, create a class for it like this:
.my-special-font{ font-family: 'Paprika', cursive !important; }
Then you assign the class to where ever you want that font:
<p class="my-special-font"> Text in the paragraph </p>
Cheers!
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.