Magento 2 – How to Change Fonts in Frontend

fontsfrontendmagento2styles

How do I change the font family (at a theme level) to Helvetica in Magento 2.

Best Answer

1) To add a Google Font:

Go to <theme_dir>/Magento_Theme/layout/default_head_blocks.xml and add it 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 src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
</head>

Reference

2) To add a font file:

1- app\design\frontend\Vendor\CustomTheme\Magento_Theme\layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/custome.css" /> 
    </head>
</page>

2- Put your fonts in the below custom theme directory. app\design\frontend\Vendor\CustomTheme\web\fonts

3- Now include your custom fonts in app\design\frontend\Vendor\CustomTheme\web\css/custom.css

@font-face {
        font-family: 'Open Sans';
        src: url('../fonts/opensans/light/opensans-300.eot');
        src: url('../fonts/opensans/light/opensans-300.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/light/opensans-300.woff2') format('woff2'), url('../fonts/opensans/light/opensans-300.woff') format('woff'), url('../fonts/opensans/light/opensans-300.ttf') format('truetype'), url('../fonts/opensans/light/opensans-300.svg#Open Sans') format('svg');
        font-weight: 300;
        font-style: normal
    }
      [1]: https://developers.google.com/fonts/docs/getting_started#Quick_Start
      [2]: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css

Reference

Finally change the body, div, p etc.. in a css file with font-family property

nb: Some themes have the possibility to change this via the settings design theme in Admin panel.

Related Topic