Streaming live at 10am (PST)

Google Font weights not adding; color / bold issues on text

I set up a project, went to Settings, added in 3 Google fonts, and chose the regular font weight for each. Later I went back into settings and also chose a 700 font weight. However, the additional font weight does not show when I go back to Designer, add text, and then choose a font weight. Only the regular font weight shows.

So my workaround is to highlight the text and choose Bold. But this is not best practice. I should be able to use the 700 font weights… which I can do if I export the code and fix it. Not sure if I can fix the CSS right in Webflow, I haven’t tried. But those are options if you are having the same issue.

I’ve also been having issues when I go back into a paragraph and change the color and bold on a portion of the paragraph, maybe not at the same time, I might do color and bold at different times. Sometimes it changes the whole paragraph even though I only highlighted a portion of the paragraph. It seems to get confused. My guess is that somehow the end tags are not being placed properly. Again, I will fix this when I export the code, but be aware of this issue.

Be aware of spacing. If you highlight a word only, without the space before or after the word, and change the color or bold attribute, then later you go back to the word and by mistake highlight the word AND the space either before or after the word, then it REALLY messes stuff up. Webflow gets confused and you might not get the bold/color you expect. Webflow really should consider changing its code to truncate the space before it bolds/colors or undoes the bold/color. Or at least warn me that I’ve messed up and told it to bold/color the space when before I did not.

Yes, the coloring / bold issue is probably my fault. But you could do more to help me not make this mistake, please. Maybe a popup showing where my begin/end tags are within the paragraph with the ability to move them to where they really should be? I can see the color/bold issue being a huge problem to overcome if I am overlapping attributes by mistake. Sorry. Bad bad user.

Oh, and by the way, I get different results editing in the desktop view than when I switch to a handheld device view to edit the text only in that view. Not sure why, but again probably something I did. I can’t get the bold / color to change properly in some paragraphs when highlighting a portion of the paragraph. But I’ve made so many changes to the paragraph, the CSS is probably pretty messed up by now. My only hope is exporting the code and fixing it. Just wish you would help me not make stupid mistakes.

Mikeyve suggested the following but it didn’t help:
If you end up wanting to make a change to one of page elements, just add a combo class and modify the properties as needed. Now changes made to the parent class shared by both instances will be made without overriding the changes to the combo class variation:

https://preview.webflow.com/preview/pamelas-hwf-landing-page-21c72aceae4adc?utm_medium=preview_link&utm_source=dashboard&utm_content=pamelas-hwf-landing-page-21c72aceae4adc&preview=1a4103e6082177f889e6512ab90a641f&mode=preview

This isn’t the original, only a copy.

What I’m on is the phone view of the Home Worry Free Method page. It’s the tan and gold lettering near the top of the page. I made the phone view all tan because I couldn’t get it to work. I still can’t get it to work. When I highlight a portion of the text it thinks that I am highlighting the whole paragraph.

The link I shared is a copy of what I’m working on, not the page that I am actually working on currently.

https://preview.webflow.com/preview/pamelas-hwf-landing-page-21c72aceae4adc?utm_medium=preview_link&utm_source=dashboard&utm_content=pamelas-hwf-landing-page-21c72aceae4adc&preview=1a4103e6082177f889e6512ab90a641f&mode=preview

And maybe you can take a look at the color and bold issue that I have in the other post 10 hours ago? In the hand held phone view only, I am having problems bolding or coloring text on the Home Worry Free Method page, in the paragraph near the top of the page in the tan with orange lettering. Finally I just made it all tan on the phone view since I couldn’t make it work.

Just including this above to keep the threads separated but add your extra info.

How is your font set up within the site settings? Did you choose two separate weights when you uploaded your custom typfaces? Ex:

image

If you need to change these settings, you can click the “Edit” button with the wrench icon to the right of the font and adjust as needed:

image

That said, it looks like even though it’s not appearing in your drop down list it’s still getting applied appropriately within your code rendering on the front-end:

image

To easily change the weight of text within a paragraph, just use the bold text style that appears after you select some text:

image

In your case, because you’re also wanting all of your bold text to be the darker peach color, you’ll need to select that bold text element within the paragraph (remember to deselect your paragraph first) and change the style for “All Bolds” within the class selector field:

image

image

Now every time you add the bold style by highlighting your text, it will default to the style you applied to “All Bolds” which hopefully should make the change easier to manage across breakpoints/pages.

Let me know if you run into any issues :v:

  1. I fixed my orange bold by applying the correct styles. That worked.
  2. The problem with the font weight is that when I went back in to Project Settings and added the 700 weight, it made a new entry. But it didn’t use the new entry for the drop down in Designer, it used the first one it found for that font type. When I deleted the old entry for that font type which only had normal, then the new entry in Project Settings, which has 400 and 700 shows. Why are you keeping the old entry? How do I specify which entry to use, the original or the second entry?

I’m not too sure why the old version would persist after updating with the new files, but it sounds like it could be a bug.

Can you try republishing your project and reloading the Designer? If that doesn’t work you can try reloading the browser or opening the Designer in an incognito window with extensions disabled.

I will just remove the first entry, which has the normal weight only, and keep the second entry. I can’t imagine for one project why I would want two entries for the same font. I think you have a bug.

Nope it wouldn’t let me mark two comments as solutions, both my solution for the font and your solution for the bold /color, it would only let me mark one as the solution. Please add ONE entry at the bottom that has both of our solutions together and mark it as solved please.

I think you should be able to mark more than one comment as a solution since frequently part of the answer will be in one post and part of an answer will be in other posts <- bug issue.

I’m actually not able to mark solutions in threads I don’t start (I’m not an employee, just another user) but I think the longer response is fine as the solution since it’s got the most relevant information.

Thanks!

ok. Thanks for your help.

1 Like