Using a custom font in Hifidel…

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 2, 2020 at 12:02 pm #28751

Joe Sinnott
Guest

Good Morning,

I’m new to WordPress and web building, so apologize for what will likely be an endless torrent of questions for awhile. I’m trying to replace the title font in Hifidel with one I have locally on my computer. It’s the font used on my business card and letterhead, so I’d like to use it on my new site. If I can get this working, I’ll make sure to purchase a license that covers web use.

I followed the directions here:

Custom Font

I added my font (Franklin Gothic Extra Condensed) using the Custom Fonts plugin and added this code to Customizing > Advanced > Custom JS & CSS:

h1.site-title { font-family: franklingothicec; }

The font displays correctly on my Home page, but all the other pages of my site seem to be using something that’s similar but not quite the same. At least…it’s not displaying the same. I only need to use it for the site title, but need to get it working on every page. Very weirdly, the tagline looks correct on every page. I don’t know if that’s because it’s actually a different font that the one I want to use that just happens to render nicely when the text is small.

I’d also like to change the color and size of the tagline if that’s possible. I found directions for changing the size here that unfortunately didn’t work:

How do I change the tagline font? Following the instructions only changes the header font.

I’m guessing it doesn’t work because I’m using a custom font and not any of the theme’s built in fonts, but please let me know if I’m wrong about that. I’d also like to change the color of the tagline to red if I can, so that it can match the design of my other stuff.

I don’t know much, but I’m good at following directions and don’t mind getting into the guts of things to make them work. Any advice would be gratefully received.

Thank you.

November 2, 2020 at 12:13 pm #28774

Jesse Owens
Keymaster

Hi Joe-

I took a look at your site and I see that all your pages have the custom font, as well as see your red tagline. Did you already resolve this over the weekend?

November 2, 2020 at 4:15 pm #28776

Joe Sinnott
Guest

Hi Jesse,

I figured it out late last night. Some of that was diligent research, some dogged persistence, and some a little random. This is the code I wound up adding to the Custom JS & CSS area:

.site-title {
font-size: 56px;
font-family: FranklinGothicEC;
}
.site-description{
color: red !important;
}

I can’t tell you how surprised I was when it suddenly started working. I’m afraid I frightened my wife a bit with my victory yell.

If you have any advice on changing the font size for the tagline, I’d be glad to know it. It’s not essential, but it would be good to know in case I move things around more.

Thanks for getting back to me.

-Joe

November 2, 2020 at 4:18 pm #28791
Jesse Owens
Keymaster
Hi Joe-

You can adjust that with another Custom CSS rule, similar to this:
```
h3.h4.alt-font { font-size: 20px; }
```
You can use that same selector to use your custom font as well, similar to this:
```
h3.h4.alt-font {
font-size: 20px;
font-family: FranklinGothicEC;
}
```
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Using a custom font in Hifidel…’ is closed to new replies.

Looking For Something Else?