”;
Amp font is an amp-component in amp which basically helps to trigger and monitor custom fonts to amp page. This chapter discusses amp-font in detail.
To work with amp-font, we need to add following javascript file −
<script async custom-element = "amp-font" src = "https://cdn.ampproject.org/v0/amp-font-0.1.js"> </script>
The amp-font component is used for controlling the time taken for font loading. It has a timeout attribute, which takes time in milliseconds.By default, it is 3000ms. The component allows to add/remove classes from document.documentElement or document.body depending upon whether the font required is loaded or got into an error state.
The format for amp-font tag is as shown below −
<amp-font layout = "nodisplay" font-family = "Roboto Italic" timeout = "2000" on-error-remove-class = "robotoitalic-loading" on-error-add-class = "robotoitalic-missing" on-load-remove-class = "robotoitalic-loading" on-load-add-class = "robotoitalic-loaded"> </amp-font>
A working example on how to use amp-font in amp pages is as shown here −
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Font</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <cript async custom-element = "amp-font" src = "https://cdn.ampproject.org/v0/amp-font-0.1.js" ></script> <style amp-custom> @font-face { font-family: ''This font is not available''; font-style: normal; font-weight: 300; src: url(fonts/MissingFont.ttf) format(''truetype''); } .font-missing { color:red; font-size:25px; } </style> </head> <body> <h1>Google AMP - Amp Font</h1> <amp-font layout = "nodisplay" font-family = "Font Does Not exist" timeout = "2000" on-error-remove-class = "font-missing" on-error-add-class = "font-error" on-load-remove-class = "font-missing" on-load-add-class = "font-loaded"> </amp-font> <p class = "font-missing"> Example of amp-font component to show how attributes on-error-remove-class, on-error-add-class, on-load-remove-class and on-load-add-class works when the font file to be loaded does not exist. </p> </body> </html>
Output
The output of the sample code given above is as shown below −
An example of amp-font when font file loads successfully is shown here −
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Font</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = "amp-font" src = "https://cdn.ampproject.org/v0/amp-font-0.1.js"> </script> <style amp-custom> @font-face { font-family: ''This font is not available''; font-style: normal; font-weight: 300; src: url(fonts/MissingFont.ttf) format(''truetype''); } @font-face { font-family: ''Roboto Italic''; font-style: normal; font-weight: 300; src:url(fonts/Roboto-Italic.ttf) format(''truetype''); } .font-missing { color:red; font-size:25px; } .robotoitalic-loading { color: green; } .robotoitalic-loaded { font-size:25px; color: blue; } .robotoitalic-missing { color: red; } .robotoitalic { font-family: ''Roboto Italic''; } </style> </head> <body> <h1>Google AMP - Amp Font</h1> <amp-font layout = "nodisplay" font-family = "Font Does Not exist" timeout = "2000" on-error-remove-class = "font-missing" on-error-add-class = "font-error" on-load-remove-class = "font-missing" on-load-add-class = "font-loaded"> </amp-font> <p class="font-missing"> Example of amp-font component to show how attributes on-error-remove-class, on-error-add-class, on-load-remove-class and on-load-add-class works when the font file to be loaded does not exist. </p> <amp-font layout = "nodisplay" font-family = "Roboto Italic" timeout = "2000" on-error-remove-class = "robotoitalic- loading" on-error-add-class = "robotoitalic-missing" on-load-remove-class = "robotoitalic-loading" on-load-add-class = "robotoitalic-loaded"> </amp-font> <p class = "robotoitalic"> Example of amp-font component to show how attributes on-error-remove-class, on-error-add-class, on-load-remove-class and on-load-add-class works when the font file exists and loads fine. </p> </body> </html>
Output
The output of the sample code given above is as shown below −
The above example shows how to work with font attributes like font-family,timeout,on-error-remove-class,on-error-add-class,on-load-remove-class,on-load-add-class.The classes decide whether there is error or success in font loading.
”;