Changing font in part of a post
-
Hi there. Very new to this CSS stuff, so bare with me. Working on a post where I have two stand alone sentences (each acting as paragraph). I’d like them to be in a different font than the rest of the post. How would I do that?
The blog I need help with is: (visible only to logged in users)
-
Hello there!
In order to do this you’ll need to make sure you’re in the HTML editor (https://en.support.wordpress.com/editors/)
If you copy this code in and fill it in with the different changes you’d like, it should work:
<p style="font-family: "open sans", sans-serif; color: #a53d3d;">Your sentence text here</p>You can change the font family where it says open sans by putting the name of the new font family inside those quotes.
Hope that helps!
Sage -
Thanks for responding Sage, unfortunately it didn’t work. I copied what you have and replaced open sans with jubilat . Nothing changed.
-
Hello there,
That would be because your site doesn’t currently have the jubilat font installed.
In order to do that you would need to have access (with an upgraded account, not sure if you have already or not) to the custom CSS area. Then you would need to add in the font files which can be pretty tricky https://css-tricks.com/snippets/css/using-font-face/
Another option would be if you like a Google Font https://fonts.google.com that isn’t already included in your site and have the custom CSS area enabled then I could help you include that.
Let me know if you have any questions!
Sage -
Thanks Sage. I just the premium upgrade. Do I still go to the “tricks” site you provided to add the font?
-
Sage, I decided to try Libre since its not a Tk font. How does that change the code you first gave me?
-
Hey there,
Yup, if you have the premium upgrade then you have access to the custom CSS area.
Do you have a copy of the Jubilat font? If not, I strongly suggest choosing an alternative from google fonts as it is free and I’m much more confident in it actually working.
If you did have the Jubilat font then you would need it in the different filetypes as mentioned in the CSS-Tricks code.
Let me know,
Sage -
Ah, posted before I saw your new one :)
You’ll need to go to your custom CSS area and place in this code:
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');Then your paragraph code would become:
Your sentence text here
Let me know if that doesn’t work!
Sage -
You tried, Sage, but this hasn’t worked either. Grrr!
I typed the CSS code into the CSS customization area and saved it. Then I typed the other code in the html of the post and nothing changes. I’m probably going to have to scrap the idea for now, I need to direct my attention elsewhere. I do thank you for your help!
-
Ah, that’s a shame!
Sorry it didn’t work, feel free to pop back here if you’d like to revisit it :)
Take care,
Sage -
Thanks again for your help, @sagebrownell.
It’s only possible to choose from the list available under the Fonts panel of the WordPress.com Customizer. Fonts outside of that list can’t be used with WordPress.com sites, and @import won’t work in custom CSS here.
@vinelifefaith: If you’d like to choose from the list of custom fonts then the CSS that Sage originally gave will work as intended.
-
Thanks for clarifying @siobhybyh. Is jubilat a sans-serif font? Just want to be sure because when I tried the CSS Sage kindly shared, it didn’t work.
As I understood it, I’m supposed to enter the code in the html version of my post. I did that, and the font didn’t change at all. I may have missed something. Any other thoughts?
-
Hi @vinelifefaith,
You’ll need to find the exact name that’s used to call a certain font in order to create the needed code for it.
In the case of Jubilat, the needed code is as follows:
<p style="font-family:'jubilat-1', 'jubilat-2', sans-serif;">Your sentence text here</p>As you’ve upgraded to WordPress.com Premium, I recommend added a class to your paragraph over the above inline styling:
<p class="jubilat"></p>You can then add the following to the CSS panel of the WordPress.com Customizer, which will be used every time you call the jubilat class:
.jubilat { font-family: "jubilat-1","jubilat-2",sans-serif; }Let me know if the above is clear or if you have any extra questions.
Thanks!
-
Thanks! Where do I put the ‘<p class’ part you recommend? Does it go in the first line of code you gave me?
-
This is frustrating for sure. Lol I feel like I’ve wasted money on the upgrade since I’m not able to make use of all the benefits. I do appreciate your help thus far, ladies.
I tried the first line of code for jubilat. The only change was a larger size of the FF Dagney Pro I have set as my default body text. Then I tried inserting the class code first, followed by the font change code on the next line, still no font change. I’m a novice at this and I haven’t found a css tutorial that addresses this.
-
Hi @vinelifefaith,
The HTML that I provided would be placed in your post’s editor, in place of the code originally provided by Sage.
The text that you wish to be Jubilat should then be placed within the HTML. Like so:
<p class="jubilat">Example text.</p>Can you let me know what post/page you’ve added the above HTML to (if any). I can then take a look into why it’s not working as expected.
-
I tried it on the following post: No Grade, All Grace. Specifically the line that says, “Where there is grace, there’s no grading. There…is…NO…grading.”
This is the code I used for it: <p class=”jubilat”>Where there is grace, there’s no grading. There…is…NO…grading.</p>
I originally had that text in bold. I’ll leave it this way while you have a look. Thanks again.
-
Hi @vinelifefaith,
I made a mistake in my previous advice to you and didn’t full understand what was/wasn’t possible regarding CSS font changes. I’m very sorry!
Custom fonts can only be used if they have actually been chosen from the Headings or Base Font dropdown menu.
So, you could set that sentence to use the Montserrat font (as that’s the font your using for your Headings):
.jubilat { font-family: "Montserrat",sans-serif; }If you set Jubilat as the font for your Headings then you could then use that font within your content.
You could also use Georgia, Helvetica, Arial, and Courier, as those fonts are included as part of theme’s default styling.
Let me know if that makes sense or if you have any questions on that.
-
Ok @siobhyb so I can only use the heading font as an accent font in my content. What does that code above mean and where would I put that? What’s the exact line of code I need to set my sentence in Montserrat?
Also you mentioned Georgia, Helvetica, etc. Do they also have to be used in the heading to be used in the content? Or are you saying they can be used regardless?
- The topic ‘Changing font in part of a post’ is closed to new replies.
WordPress.com Forums 