October 2017
Intermediate to advanced
370 pages
8h 57m
English
We could also achieve this with AMP's amp-fit-text component. This component allows us to specify a fixed width and height, and minimum and maximum font sizes, and amp-fit-text will scale the font to fit the text within these constraints. Let's change our pull-quote example to use amp-fit-text instead of blockquote.
Since amp-fit-text is an extended component, it must be explicitly loaded in the head of the page like this:
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
Next, add this code somewhere within the main content in the body of the page:
<amp-fit-text width="400" height="75" layout="responsive" min-font-size="24" max-font-size="48"> ...
Read now
Unlock full access