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.

Improve this question

4 Answers 4

Reset to default
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

Improve this answer
2
  • This seems to be the instructions for M1, whereas the question is tagged for M2; see Anshu's answer instead.
    – Alex Hadley
    Commented Apr 19, 2017 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
    Commented Apr 19, 2017 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>
Improve this answer
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

Improve this answer
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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