8

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

Does anyone have the dea?

1

1 Answer 1

29

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>

3
  • 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, 2017 at 21:26
  • Why do you try to load javascript in a link tag? <link src="js/sample.js"/> ??
    – Black
    Aug 13, 2020 at 11:06
  • Actually we don't need type="text/css" to make it work.
    – fudu
    Oct 7, 2021 at 9:53

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