Font issue

I am trying to use a custom font. I found the instructions here to use @font-face and tried that, but it only shows the custom font in page builder mode, but not after the page is published. I cleared the BB Cache and tried it in incognito mode with no luck. I also installed the “Use any font” plugin and that doesn’t seem to work either.

I also gave it a class name of special-heading and put that in my custom CSS with the font-family of my custom font, but when I view the page with inspector I don’t see that anywhere, so I don’t know what I’ve done wrong.

The page where the problem is: http://bcolt.flywheelsites.com/what-we-do/
Thanks for your help.

Hey Fran,

You’ll want to target the heading instead. Since you’re using h2 headings, you can use .special-heading h2 for your selector. Give it a shot and let us know how it goes! :slight_smile:

Ben

Thanks, Ben, that worked. But I’m still stuck on the CSS elements. I want the top two headings to use one font, and the bottom two to use another font. I thought if I gave each one its own class name then I could target them separately, but that’s not working. Once I got the top two to work using the .special-heading h2, I set up the bottom two using the same structure but a different class name, but they changed to the same font as the top two, instead of the other font I want to use. I guess I’m still a CSS rookie. :confused:

Thanks!

Hey Fran,

That shouldn’t be the case if you didn’t add the special-heading class to the other 2 modules. Are you referring to the Our Background and What We Do sections? They’re currently following the styling below. Is that what you wanted?

.block-hand h2 {
  font-family: 'BetterFly-Narrow', sans-serif !important;
}

Ben

Yes, I’m referring to Our Background and What We Do titles. They are supposed to be using an all caps handwritten font, not the script font that I was using for the other two headings. Right now, they are showing script and not handwritten all caps. I’m using the plugin “Use Any Font”, maybe it’s a problem with that, because I don’t see either of the fonts in Firefox and I’m all up-to-date with that so it should look the same as chrome. I’ll play around with it a little more and open a new ticket if I rule out the plugin.

Thanks for your help!

Hey Fran,

So you were seeing the correct font on Chrome but not on Firefox? It’s most likely an issue with the font you’re using then. Different font files are required for different browsers. You can check the links below for more info. :slight_smile:
W3 Schools Font Face
CSS Tricks Font Face

Ben

[Content Hidden]

Hi Fran,

In regards to your question about you not being sure when to put h2 before or after. If I understand you correctly, you’re referring to something like:

  1. h2.example { … }
  2. .example h2 { … }

In 1. case, the CSS will apply to any h2 that has a class of example.
For example <h2 class="example">Hello World!</h2>

In 2. case, the CSS will apply to all h2 tags that are wrapped in a element with the class name example.
For example <div class="example"><h2>Hello World!</h2></div>

In regards to your Callout question. All modules have their own class names that a related to that module. For example, the text in the Callout module has a class of fl-callout-text-wrap which you can use to style the text.

.fl-callout-text-wrap {
  color: red;
  font-weight: 900;
}

However, in using this class to apply custom CSS, you will affect all Callout Modules used throughout your site. If this is’t ideal for you, then you will want to prefix your CSS with the node-id class or add your own class to the module. Like so:

.fl-node-56ce3922cdd03 .fl-callout-text-wrap {
  color: red;
  font-weight: 900;
}

Or

.my-custom-class .fl-callout-text-wrap {
  color: red;
  font-weight: 900;
}

By doing this you will only style that particular module.

Hope this helps.

Thanks,
Danny

Yes, Danny, that helps so much! I’m going to print it out and put it next to my monitor!!! :slight_smile: Thanks for going above and beyond.

No problem, Fran. Happy to help! :smiley:

Thanks,
Danny