7

How can I add my Google fonts in the Magento2 head in layout file?

Does anyone have the dea?

26

You can add a Google Font to the Magento 2 like an ordinary external css: https://developers.google.com/fonts/docs/getting_started#Quick_Start http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css

Example:

Open your file <theme_dir>/Magento_Theme/layout/default_head_blocks.xml

Add the Google Fonts like this:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <!-- Add local resources -->
    <css src="css/my-styles.css"/>

    <!-- The following two ways to add local JavaScript files are equal -->
    <script src="Magento_Catalog::js/sample1.js"/>
    <link src="js/sample.js"/>

    <!-- Add external resources -->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />

    <!-- Google Fonts -->
     <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Srisakdi" src_type="url" /> 
</head>

| improve this answer | |
  • 2
    A note on this that you need rel="stylesheet" on the Google link for them to work (in Firefox, at least), and it also helps to specify the font weights, so <link src="fonts.googleapis.com/css?family=Montserrat:300,400,500,700" src_type="url" rel="stylesheet" /> – RichardB Feb 4 '17 at 21:26
  • Why do you try to load javascript in a link tag? <link src="js/sample.js"/> ?? – Black Aug 13 at 11:06

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