Letter Spacing alternatives?

Webdesign Help
1

I’m so flustered right now sheesh! I have a font my client wants to use in her header for the text logo, but for some reason, it’s letter-spacing is defauting -2px in Firefox and only Firefox. I can’t see any way to put a -moz- in for the letter spacing (might be some way, I haven’t played a lot with that stuff other than the ones that are obvious), and if I correct it for Firefox … you guessed it, it sets the rest of the browsers off by 2px for that heading.

I’m trying to avoid adding the logo in as an image if I can, anyone got any other ideas that might work on this?

2
3

Yeah I read that…well most of it and skimmed the
rest. Says it should be compatible but it’s not working right.

4

I don’t know if that’s what you need, or if it’s going to help you.

I’m really crazy, haha, they are Scripts that identify the browser used, with this it may be possible for you to change settings for them, I don’t know if they work.

1 Like
5

Thanks @gilmar I’ll check them out.

6

Hi @jo-r Could it be something in your firefox settings?

image
image1116×988 41.2 KB

7

try setting the letter spacing in a parent container and then setting the css for the actual logo to normal

8

This is the weirdest dang thing lol. I’ve tried both of your ideas @floydmanfloyd and @richards but I still have a 2px letter-spacing issue. I’m thinking at this point that it’s something wrong with the Font rather than Firefox, or a compatibility issue with Firefox and this font. Anyone else on a Mac? The font called Fleur De Leah which is a Google font, but I had to download it and transpose it to be used in BSS. Maybe something gets lost in that transposition or something? Dunno, but I think I’m going to try a different font and call it good at this point.

@gilmar Thanks much for you suggestions as well, but I’m just gonna give it up at this point as I think the font is faulty with Firefox.

Appreciate all your help guys, thanks very much!

9

@jo-r

I downloaded the font from google webfonts helper and I can’t see any difference in Chrome, Edge or Firefox
have a look here if you can see any difference

10

It feels a bit hacky but you can target just firefox with CSS:

@-moz-document url-prefix() {
  p {
	letter-spacing: -2px;
  }
}

This stackoverflow “Targeting only Firefox with CSS” thread goes over it. I have tried it and it works. I didn’t try it with the font that you are having issues with but it does affect the font only in Firefox from what I have seen.

image

11

@kuligaposten that text looks just fine to me, maybe it’s the transposer that is messing up then? I’ll try getting it your way and see if that works.

@joroson If I can’t get @kuligaposten’s way to work, I’ll try yours next.

Thanks so much guys for sticking with this. Man I hate things like this. So much time is wasted on what usually ends up being software/browser/etc. issues and not “always” user error lol.

I’ll post back when I have checked it all out!

12

@kuligaposten Ok so double clicking the BS5 file added the bscomp file to my components, but doesn’t add the font to my fonts so it’s not showing the right font. Maybe the font wasn’t included when you saved the component?

13

Well I think it’s a Mac issue (shut up, don’t say it! LOL) but I got the font from @kuligaposten and it works as long as I don’t put it in a Span … go figure. Thankfully it’s not one I’ll use a lot throughout the site so it should be ok.

Thanks to everyone that helped on this, your time is extremely appreciated!

14

Sooooo I learned a valuable lesson yesterday after posting that last post. I thought all was good to go and low and behold the damned thing broke again. Wouldn’t have been so bad really if the words just split further apart, but when it breaks (broke) it actually splits the top and bottom of the smaller letters (Caps of first letter were fine). So when the letter spacing was more or less, the letter “n” would slide the top over to the right or left and skew it so it didn’t line up with the bottom of the letter. Never saw such a creature LOL.

Anyways, it broke again and guess what … Thanks to @kuligaposten sending me the font itself and even more helpful, the components. I tracked it down to … wait for it … BOLD!

OMG who would have thought that something like a “strong” tag or setting in CSS would do that? Well I hadn’t looked at the font information clear enough, and it doesn’t have a bold setting so it broke the alignment of the letters.

Lesson here my little Grasshoppers … Just because a BOLD shows visibly on the letters, doesn’t mean it’s “supposed” to!

And now is all right with the world and the font is working correctly. Hopefully it was amusing enough to start your days with lol

Thanks again for all your help guys, without it I never would have gotten that figured out!

15

Thinking about this kind of difficulty, and the collaboration of friends, I had the following idea.
It would be interesting if the BSS made the formation of teams available to work on the same project, if it is not possible we have the resource to export components from the gallery or share it online, but I believe that the formation of a team would be the best choice, I made some images for illustration .
I don’t know if the translation was understandable.

image
image307×669 13.8 KB

image
image304×855 14.6 KB

image
image306×852 15.3 KB

16

@jo-r
have a strong bold look here :upside_down_face:

17

omg I give up @kuligaposten lol. I cannot use it on my end, that’s what breaks it for me. How in the world does it work for you but not me? Has to be a Mac/Firefox issue.

I “can” bold the Capital letters, just not the small ones. Caps don’t break for some reason.

Hmm, maybe it’s how I’m applying it or something? Your’s is not broken on the page in your link even in Firefox. So here’s the steps I took to add it to the site:

Downloaded the font and the components from the links you gave me in message. Dbl clicked the components and it added them to my components in BSS. Opened the zip file and extracted it all. Imported the Font’s CSS file from there into BSS.

Referenced the Font in the SCSS file.

That’s it I don’t know what else I could have missed. I tried bolding both within CSS and by using the visual preview window’s editor and both ways I get the results I mentioned, here’s a screenshot of what it’s doing for me on Firefox when bolded and is perfect on Safari and Chrome.:

CleanShot 2021-11-15 at 11.55.18

18 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="fleur-de-leah/fleur-de-leah-v1-latin-regular.eot">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Qual navegador? JavaScript dica 25</h1>

    <h1 style="font-family: 'Fleur De Leah';letter-spacing: -3px;font-weight: bold;font-size: 160px;" id="browser"><strong></strong></h1>
    <h2 id="codename"></h2>

    <script>
        var navegadores = "";
            if (navegadores = navigator.userAgent.indexOf('Firefox') > -1) {
                document.getElementById("browser").innerHTML = "Pia Manning";   
            }
    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>-->

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    
  </body>
</html>

image
image2560×1080 201 KB

19

Yeah I’ll probably try that later, I’m so burned out on it right now lol. Thanks much @gilmar