Set Correct Font Size To Fit Container Width - jQuery fit_font

fit_font is a small and configurable responsive text solution that calculates and sets the correct font size to fit the width of the parent container.

How to use it:

1. First you need to load the JavaScript file jquery.fit_font.js after loading jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="path/to/jquery.fit_font.js"></script>

2. Call the function on the text content and determine if your text is multiline.

<p class="example">
  Text Here
</p>

$(function(){
  $('.example').fit_font({
    multiline: false
  });
});

3. If the multiline option is set to true, you might need to specific a fixed height for the parent container.

$(function(){
  $('.example').fit_font({
    multiline: true, 
    height: 300
  });
});

4. Set the min/max font size.

$(function(){
  $('.example').fit_font({
    multiline: true, 
    height: 300,
    max: 2, 
    min: 1, 
    unit: 'em'
  });
});

5. You're also allowed to specify the width to consider when resizing the font size. Default: element width.

$(function(){
  $('.example').fit_font({
    multiline: true, 
    height: 300,
    width: 400
  });
});

6. Decide whether to hide the text until the font is resized. Default: true.

$(function(){
  $('.example').fit_font({
    multiline: true, 
    hide_while_working: true
  });
});

7. Set the step size when resizing text. Default: true.

$(function(){
  $('.example').fit_font({
    step: /em/.test(options.unit) ? .1 : 1
  });
});

Changelog:

2020-01-09

• Added 'step' option

---

This awesome jQuery plugin is developed by oriadam. For more Advanced Usages, please check the demo page or visit the official website.