Ok so I'm using this plugin with Arctext.js which I'm sure they are the same authors because the author of arctext said that if we need a defined width for our container and to make sure our text doesn't go out of the area, to include fittext.js and put the attribute fittext set to true when you call arctext() function.

So here is my javascript:

$('#top_curve').arctext({radius: 500,fitText: true});
Then my HTML:

<section id="sticker">
    <div id="top_curve">Muddy Buddy - Canton, Oh</div>
Then here is my CSS:

#sticker {
    height: 4in;
    width: 6in;
    overflow: hidden;
    margin-left: 1.25in;
    background: pink;
#top_curve { width: 3.6875in; margin: 0 auto; font-weight: bold; }
Then here is the page where you can see the error:


Why is the text too large for the container when I have a defined width? It says it takes 1/10 of the container's width to get the font size.. is there anyway I can fix this. Is it a glitch with fittext.js? I even tried to unbold the text and it is just as large.

Any help would be greatly appreciated. Thank you!