How to use Font Awesome icons in AMP, Blogger, HTML & WP

If you had successfully came here, we can assume that you already know AMP, It's acronym for Accelerated Mobile Pages, In general some web developers who are New to AMP or thinking to get started with Accelerated Mobile Pages, they think it as Big mess to rewrite entire website, It is true to some extent but Accelerated Mobile Pages comes with benefits and some drawbacks.

Accelerated Mobile Pages benefits and some drawbacks, that would topic of another day, in this article we are going to talk about How to use font awesome icons in Accelerated Mobile Pages (AMP), Blogger, HTML & WordPress.

How to use Font Awesome icons in AMP, Blogger, HTML & WP

Google Accelerated Mobile Pages can’t include external stylesheets, with the exception of custom fonts and icons.

You can embed custom fonts, web fonts into your page in two ways:

How to use Font Awesome icons in Accelerated Mobile Pages with link tag

How to use FontAwesome icons using CSS <link> tag to access external Font Awesome icons CSS file

Place the Font Awesome icons css file link given below in <head> section of your website pages.


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css" type="text/css"/>
        
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" type="text/css"/>

Note: Only "https://use.fontawesome.com" domain origin is whitelisted and allowed for font serving via link tags for Google AMP enabled web pages.

How to use Font Awesome icons in AMP using '@font-face' method

In the this method we are using Font Awesome icons in AMP web pages by including internal css @font-face method.

The declaration and syntax as follows below:

<style amp-custom>  @font-face {
    font-family: "FontAwesome";
    src: url("https://somedomain.org/fonts/fontawesome-webfont.ttf");
  }
  body {
    font-family: "FontAwesome";
    content="";
  }</style>

Here you can also use self hosted fonts and icons also without any errors.

Method 2 : @font-face method is best suitable if your requirement is more specific to detail all font family, font weight, font style and font display swap. To optimize your page load speed in Blogger or Any HTML webpages, For Wordpress you could add them manually or via any wordpress plugins for amp fonts wordpress compatible.

If you like reading, please subscribe and share with your friends.