Magento 2 – Adding TypeKit Code to the Head

headmagento2

All I want to do is to add a custom font from TypeKit into my Magento 2 website.

Previously I just used to find /app/design/frontend/XXX/XXX/page/head.phtml and edit that. Simple.

With Magento 2 it seems to be hugely complicated. I keep finding articles like this. Do I really need to create an entire Module just to add 2 lines of basic HTML to the head of a document?

Surely there must be an easier way?

I found this similar question, but I dont get the answer. Where do I create a layout file in my theme? Or is it suggesting I create a whole seperate Module again?

I also found this question, and it looks insane. Am I right in thinking that they are editing 3 seperate files, jsut to add a JS file into head?

Surely this cant be right? Isn't there a head.phtml file I can just edit?

Can someone break this down for me, assume I am an idiot, and explain how I can easily just add 2 lines of TypeKit code to the Head. Many thanks.

Best Answer

There is no need to create extension just to add script in head. You can use following setting from admin.

UPDATE:

In Magento 2.0, the Miscellaneous Scripts feature was located under the Admin > Stores > Configuration > General > Design > HTML head And find Miscellaneous Scripts

Add Your Typekit/Custom script here in Miscellaneous Scripts textarea and Save Config.

In Magento 2.1, this feature was relocated to the Admin > Content > Design > Configuration Tab. You will then need to select the Scope for which you wish to make the changes. In the Other Settings section, select the HTML Head Tab.

Add Your Typekit/Custom script here in Scripts and Style Sheets textarea and Save Config.

Note: Don't forget to clear cache

Hope it helps you

Related Solutions

Magento 1.9 – Adding Code to Head Section of Homepage

You could look at doing the following:

<cms_index_index>
    <reference name="head">
        <block type="core/text" name="my-block">
            <action method="setText"><text><![CDATA[<link rel="alternative" hreflang="en" href="https://www.MYURL.com/" />]]></text></action>
        </block>
    </reference>
</cms_index_index>

Magento 1.9 – Adding New Facebook Pixel to

I would look at using google tag manager to handle this so when the script changes or you want to add more scripts to the site its all done in the one place.

If you still want to add the script yourself you should not use a js file and create a block instead:

<?xml version="1.0"?>
  <layout version="0.1.0">
    <default>
      <reference name="content">
        <block type="core/template" name="facebook.pixel" as="facebook.pixel" template="page/facebook-pixel.phtml" />
      </reference>
    </default>
  </layout>

and then in skin/frontend/{package}/{theme}/js/facebook.js add your js code.

Best Answer

Related Solutions

Magento 1.9 – Adding Code to Head Section of Homepage

Magento 1.9 – Adding New Facebook Pixel to

Related Topic