2.6 Integrate the `` Element

Hey, welcome back to up and running with AMP. In the last lesson, we went through and integrated a couple of Google web fonts and we also integrated a web font using @font-face. But there's still one more thing that we need to do to make our web fonts fully AMP friendly, and that is to integrate the AMP font element. So what this element is designed to do is to give you a fallback. So if for one reason or another the web font that you're using in your design doesn't load, you're not left with a broken looking page. And I'll just quickly show you what it is that we're trying to avoid. If we go into our project folder and we just temporarily rename our fonts folder to something else. Now when we go back to our preview, our font file is no longer gonna be able to load and what we get instead are these ugly looking squares. So obviously this is something that you want to avoid and there's some tools built into AMP to help make sure that you do. So in the CSS that we added to integrate our FontAwesome fonts, you'll notice that we have this couple of lines here. What this code is designed to do is hide that entire social icons section, if the class font-awesome-missing is applied to any parent element of the social outcomes area our a document header. So if the class font-awesome-missing is applied to any parent, then that whole section's gonna be hidden. Otherwise, this code gets ignored and the social icons does display as usual. But right now there's nothing in our site that's gonna add that class if our fonts don't load. So that's what we're gonna use the AMP font element to do. So all the way down at the bottom before our closing body tag, we're gonna add in the element amp-font. And we're going to set the layout parameter for this one to nodisplay, because this is just a purely functional element. If's never gonna be seen, it's just there to do a job. Now we just need to let it know which font family it is that we want it to check on for us. So add in the attribute font-family and then we're gonna set the value to FontAwesome. So it's gonna check and make sure that that FontAwesome font is loaded. Next up we're going to let AMP know how long we wanna give that font to load. So we're going to set Timeout = *3000. So then if the font hasn't loaded in 3,000 milliseconds, we're gonna get it to perform an action for us. And the way we do that is by adding on-error-add-class. Now this is gonna add any class that we specify to the body element. And here is where we specify that we want it to add a font-awesome-missing class that we just looked at a moment ago. All right, so that's everything, now we'll just close off our AMP front tag. Now the JavaScript code the AMP needs to run the AMP font element is not actually present by default in the main JavaScript file that you added in the first lesson. There are some elements that are optional and for these elements, when you decide that you wanna use them, you have to load in an extra JavaScript file to handle them. So when that's the case, all you have to do is go to the AMP docs page for that particular element and it will give you the snippet that you need to load in the required script. And this page is gonna be linked in the notes below this video. So we'll just copy this snippet, we'll go up into the head section and after the script tag that you already have, we'll paste in our new script tag. So now when we go back to our preview, we no longer have those unsightly broken looking squares. That the whole section has just been hidden. But if we go back into a project and rename our font folder to the correct name again, Our font icons are all back again. So that's just a really good way to be thorough and make sure that no matter what, visitors to your site are never gonna be presented with anything that looks broken because a font file hasn't loaded correctly. All right, so that wraps up integrating fonts into the site, and that's also everything that we're gonna be doing with this cover area at the top. Now we're gonna move into starting to add more content sections below. And the first thing that we're gonna do is that add a YouTube video. AMP actually provides a really quick and efficient way of integrating YouTube videos and we're gonna go through how you can use it in the next lesson. I'll see there.