0

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.

8

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

Login to admin and navigate to following :

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

  • This seems to be the instructions for M1, whereas the question is tagged for M2; see Anshu's answer instead. – Alex Hadley Apr 19 '17 at 8:48
  • 1
    @AlexHadley The Old answer is for Magento 2.0 version. I've updated it for Magento 2.0 as well – Rohit Kundale Apr 19 '17 at 9:18
2

To add using layout xml rather than database configuration use the following in app/design/frontend/<vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://use.typekit.net/xxxxxxx.js" src_type="url" />
    </head>

    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Text" name="typekit">
                <arguments>
                    <argument name="text" xsi:type="string"><![CDATA[<script>try{Typekit.load({ async: true });}catch(e){}</script>]]></argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
1

Script can be added in the admin.

Go to Content -> Configuration (Under Design) -> Click on Edit (Required Theme) -> Html Head -> Scripts and Style Sheets

0

In Magento 2.2.6 you need to:

  1. login to the Admin panel
  2. select CONTENT > Configuration (under Design heading)
  3. edit your Store View record
  4. add your code in HTML Head > Scripts and Style Sheets (under Other Settings heading)
  5. Save Configuration
  6. Refresh Configuration cache

<code>CONTENT > Configuration</code> menu

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.