Hướng dẫn thêm bộ font Awesome, Roboto vào Blogspot

Awesome, Roboto là hai bộ font được sử dụng rất rộng rãi trong Blogspot, công dụng và cách sử dụng của chúng thì mình không nói tới trong bài viết này. Dưới đây chỉ là hướng dẫn thêm hai bộ font trên vào Blogspot template của bạn mà thôi:

Thêm đoạn Script dưới đây lên trên thẻ </head> hoặc &lt;/head&gt;&lt;!--<head/>--&gt;:

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>

Nếu Blog của bạn sử dụng Tiếng Việt thì sử dụng đoạn Script sau thì font Roboto sẽ không bị lỗi:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500&subset=vietnamese,latin,latin-ext");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>

Hoặc:

<script type='text/javascript'>
//<![CDATA[
@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local('Roboto Thin'),local('Roboto-Thin'),url(//fonts.gstatic.com/s/roboto/v15/UqVi8n97UjXRXXSN8n4xx_esZW2xOQ-xsNqO47m55DA.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:100;src:local('Roboto Thin Italic'),local('Roboto-ThinItalic'),url(//fonts.gstatic.com/s/roboto/v15/gLfmBATgABwy0zMVv-qqhi3USBnSvpkopQaUR-2r7iU.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url(//fonts.gstatic.com/s/roboto/v15/NYDWBdD4gIq26G5XYbHsFKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at-0Gn9WBV1dW7jxTbD8C7Tw.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v15/XXpXIhSJd2Fy9i3t2hvhGg.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v15/qmxS4_Fg1rKbWyCorfIQ8vesZW2xOQ-xsNqO47m55DA.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0e0Gn9WBV1dW7jxTbD8C7Tw.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(//fonts.gstatic.com/s/roboto/v15/PwZc-YbIL414wB9rB1IAPaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:700;src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC-0Gn9WBV1dW7jxTbD8C7Tw.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;src:local('Roboto Black'),local('Roboto-Black'),url(//fonts.gstatic.com/s/roboto/v15/phsu-QZXz1JBv0PbFoPmEKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:italic;font-weight:900;src:local('Roboto Black Italic'),local('Roboto-BlackItalic'),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpe0Gn9WBV1dW7jxTbD8C7Tw.ttf) format('truetype')}
//]]>
</script>

Hoặc:

    <script>
WebFontConfig={google:{families:["Roboto:100,300,400,700,500","Roboto Slab:400,300"]}},function(o){var e=o.createElement("script"),t=o.scripts[0];e.src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js",e.async="true",t.parentNode.insertBefore(e,t)}(document);
    </script>

Lưu lại Template.

Phương pháp thêm Font Awesome mới:

Thêm đoạn script bên dưới đây lên trên thẻ đóng </body>

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://use.fontawesome.com/xxxxxxxxx.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

Trong đó xxxxxxxxx là mã ta lấy được sau khi vào trang http://fontawesome.io/get-started/ để đăng ký