Adobe Fonts on Blog pages

Classic
1

I am trying to use adobe fonts on my project. I am able to use Joe Workmans awesome stack on stack pages but having a difficulty adding custom fonts on headers on my blog page.

Help?

I added the Adobe project style code to the header and the following code to the CSS but I think I am doing it wrong.

2

You need to mark code as formatted text on your post or we can’t see it.

After pasting the code into the post, select it and hit the button </> right above where you type.

3

Im pretty bad at this? Don’t I do it in the css?

image
image3008Ă—1178 562 KB

4

It’s hard to say what you have here.

The CSS looks like are trying to set the headings h1-h6 to use “lust”?

If that’s true and you have the fonts set to load someplace else, the you will at minimum need to add the font-family: attribute ahead of the fonts.

h1, h2, h3, h4, h5, h6 {
   font-family:  "lust", sans-serif;
}
5

Thanks for helping me. I have the style sheet that adobe typeset provides. In my head

That should bring in all of my adobe fonts I believe?

This is the font:

font-family: lust, serif;
font-weight: 700;
font-style: normal;

Then I added this to the css section:

h1, h2, h3, h4, h5, h6 {
font-family: “lust”, sans-serif;
}

6

I’m no expert on adobe fonts, but without seeing where you put these style sheets It’s difficult to debug what’s going on.

Perhaps you can provide a URL to a test page?

7
8

Not seeing any Adobe fonts loading on that page:

2021-04-26_12-26-38
2021-04-26_12-26-381303Ă—185 53.2 KB


Also not seeing any of the CSS you listed above.

Not sure how well it would work with Aspen, Seems like the headings are using a higher specificity selector:
2021-04-26_12-33-32

That means you would need to make sure you duplicated the selector or add the !important attribute.

But first, you need to get the fonts to load on that page.


9

I am kind of lost. This is my Css section of the blog page, I have pegged in the code for the adobe webs project but for some reason its just not loading.
image

10

Hey Josh!

For getting custom fonts into the RW built-in blog page, it’s usually a two-step process.

The first step is to take the URL to the font files and put it in the “Head” section of Rapidweaver. I usually do this in the site-wide code instead of per-page to save myself time.

If Adobe is hosting your fonts, there should be a link for you to use in the dashboard. The link should look something like this: <link rel="stylesheet" type="text/css" href="https://example.com/fonts/fontkit/stylesheet.css" />

The second step is to call that font on the actual blog page.

You’ve got the headers exactly right. I see a slight error in your CSS. All of your code needs to be wrapped inside the brackets {}, from after h6, all the way to the “;” at the end of font-style.

Give this a try:

h1, h2, h3, h4, h5, h6 { font-family: "lust"; font-weight: 700; font-style: normal; }
11

Thans Chet,
This is why it looks like in my head section. I also have it site wide.
image

12

Thanks Chet, I have the typekkit code form above site wide as well as the blog page.

image

Also posted your CSS code in the css section:
image

Still no change. Is it possible that Aspen is blocking it out. The fonts work great with Joe Workmans stack but cant get it here.

13

I don’t think this is an Aspen issue. I use custom fonts in that theme without any issue.

After “lust” and before the ; add !important

font-family: “lust” !important;
14

One more issue. Replace your font-style with this one:

font-style: normal;

That one was my fault. I corrected it above in case anyone comes across this thread later.

15

My suggestion would be to STOP and clean up what you have done.

Looking at the pagelink above you have this stuff all over the place.

Top of the body you have coded this:
2021-04-27_06-49-09

Not sure how you put this into the body but it is invalid.

Next you have code in both Sitewide head section and page level. Pick one not both:

2021-04-27_06-51-25
2021-04-27_06-51-25778Ă—193 45.2 KB

Next you have the typekit code in the page level CSS:
2021-04-27_06-54-21

You don’t need the typekit 3 times.

Next change the site level CSS to this:

main.theme h1, main.theme h2, main.theme h3, main.theme h4, main.theme h5, main.theme h6 {
    font-family: "lust",serif;
    font-weight: 700;
 }

If

Themes don’t “block” custom CSS, however, they may (As Aspen does) specify a more specific specifier. Example main.theme h1 is more specific than just h1 so it gets applied. You could use !important, attribute but that’s bad practice unless you really need it. And you need to do it in the right place.

You can change the code you have to what I just gave you, (I tested it on your site) without cleaning up and it will work, but I’d clean up what you have.

2 Likes
16

This did it thank you! Can you help with one more thing?

If I wanted to change the non header font I am trying this with no success?

{ font-family: proxima-nova, sans-serif; !important; font-style: normal: }

17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.