2.5 AMP-Friendly Web Fonts

Hey, welcome back up and running with AMP. In this lesson we are going to integrate Web Fonts into our AMP page. Now there are basically only three ways that you can integrate Web Fonts into your webpages and still pass AMP validation. There are two online services that you can use. You can use Google Fonts and you can use fonts.com. And the URLs that you're pulling your fonts in from have to be the ones that you see on the screen here. They have to come from fonts.googleapis.com or fast.fonts.net. So anything coming from any other external origin is just going to be blocked by AMP. So if you need a font that is not on either of those two services, then the third way is to use @font-face. So we're going to go through how to integrate Google fonts into an AMP page and how to use @font-face with an AMP page. Now we actually already have a couple of our web font specified in our existing CSS. We've got all the default text in the body text set to use the inconsolata font. And then we've already got a font selected for the title that we're about to add to the page, and that font is going to be Noto Sans. So now to use those fonts we're going to head over to the Google Fonts website, and we're gonna search for these two fonts. First we'll find Noto Sans and we're gonna add that to our collection. Then we'll find Inconsolata and we'll add that as well. Now down in this little window here you can see that we've given this link element. And this link element is the only way that you can integrate a Google font into your web page and still pass AMP validation. You can't use @import and you can't use any type of JavaScript based method. It has to be this link element. So we're gonna copy this. We're gonna jump back back into our code. And then we're going to find the existing link tag that's already there and we're going to paste this new link tag in underneath. You can actually put this any way you want in your head code. But it's just a little bit more organized to keep like tags with like. So now we've got our Google web font integrated. We've specified in our CSS already where we want to use it. So the only thing left to do is add some text for those fonts to actually be applied to. So down underneath the image that you've been working on in the last couple of lessons we're going to add a new div. And we're going to give that div the class doc_header_inner. And we're going to make this div float over the top of our cover image. Inside there, we're just gonna add in some text. And you can copy and paste this from the index.html file in the completed project that comes with your source code if you don't want to type this out manually. We've just got an h1 element with the class doc_header_title. And then we've got a paragraph element with the class doc_header_text. Feel free to fill that out with some different content if you want. We just need something in here for our fonts to apply to. And then underneath that we're going to also include a horizontal rule. So now that we've got this content in, we need to position it over the top of our background image. And we're gonna do that by applying some CSS to this doc_header_inner class. So we'll add that into our CSS. Then we're gonna set the position to absolute. We'll set the width to 85 BW, which is gonna to make our little div take up 85% of the viewport width. But we're also going to cap that to a max width 64 RAM so that we don't end up with a box that's too wide and hence a little funny looking if this is showing on a particularly large report. So now all we need to do is vertically center our div. And we're going to do that by setting the top position to 50%. The left position to 50%. And that is actually gonna position the top left corner of this box directly in the center of the viewpoint. So then all we need to do is nudge it back upwards and to the left by half of its own width and height. And we do that by adding transform, and then translate -50%, -50%. So we've bumped the whole thing down into the center and then we've moved it back up into the left by half of its own height and width. And that's how we're going to vertically and horizontally center the box. So now let's check out what we've got. All right, so here we are. We've got our box in the center here, sitting over the top of our image. And this looks just like a regular cover image on a regular site, only everything is 100% AMP friendly. And you can also see that we've got our web fonts coming in and that it's also done in a 100% AMP friendly way. So that covers the Google Font integration. The next thing we're gonna have a look at is how to use @font-face. We're gonna use @font-face to integrate the font or some font library. And with that we're going to add some social icons underneath our horizontal rule. To get started on that the first thing we're gonna do is add in the HTML that's going to place these icons. So we're gonna do that with an unordered list and once again you can copy this HTML from the source files if you'd rather not type it all in manually. So we've just got an unordered list with the class doc_header_social. We've got a list item for each one about icons. Inside that there's a link where you'll be able to put a URL to whatever social media property. And then inside each one of those we've got an I element with classes on it that are going to pull in the appropriate font or some icon. And now in order for all of that to work, we're going to need to add the font files into your project that are going to be pulled in with @font-face. So head back into your source files and into your completed project, copy the fonts folder and then paste it into your own project folder. And if you want you can have a look inside the font folder. In there you'll just see the font awesome font in the various formats that you need in order to ensure across compatibility with @font-face. And then also while we're here, if you go back into your source files, you'll find a file in here named font_awesome.css. And this contains all the CSS that you're gonna need to integrate Font Awesome. So open that up in your code editor and what we've got here is some fairly standard @font-face code. This just loads in all of those font files that we just looked at. And then here we've just got some classes that are going to take each one of those list items that we just added in and present each one of those as a different social icon. So you can just go ahead and copy all of that. And then inside your style AMP custom tags, all the way at the top, just again just to keep things nice and organized, just paste in all of that code. So now if we go back to our preview and we have a look at the refreshed version, here is all of our social icons. Each one of them is coming from a web font that once again is being integrated in a completely AMP friendly way. So that shows you two different ways that you can get web fonts into your project and still pass AMP validation. But there's still one more thing we need to do to make this fully AMP friendly. And that is to integrate the AMP font element. And this is a really cool little element that lets you create a fall back behavior just in case any of your web fonts fail to load. So we're gonna go through how to use that in the next lesson. I'll see you there. [BLANK AUDIO]