CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ad N
Ad N

Reputation: 8376

jQuery height() for an element containing a custom-font text seems inconsistent

We have a single div like this:

<body>
    <div class="styled">
        Text
    </div>
</body>

And our style looks something like:

 @font-face {
    font-family: 'Liberation Mono'; /*a name to be used later*/
    src: url('LiberationMono-Regular.ttf'); /*local URL to font*/
}

.styled {
    font-size: 200px;
    font-family: "Liberation Mono";
}

Now, if we add some Javascript to be executed on document ready (after including jQuery 2.1.4):

<script>
    $(document).ready(function() {
        console.log($("div.styled").height())
    });
</script>

The value displayed is the console is 243, but inspecting the div with the developper tools, it is actually 227px high.

Using the default font from the browser (Chrome in our case), the result would be consistent.

Is this expected behaviour ? Is there a known work around ?

EDIT: The font is available for download from Font Squirrel.

Upvotes: 1

Views: 69

Answers (1)

Louay Alakkad
Louay Alakkad

Reputation: 7408

This is because custom fonts aren't loaded at $.ready. You need to listen to the $(window).load() event instead.

Upvotes: 1

Related Questions