2

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

4

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.

0

Here is the tutorial how to add fonts to less. http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html

0

I'm pretty sure you'd be best off changing the font variable in a _theme.less file. In app/design/frontend/YourCompany/yourtheme/web/css/source/_theme.less, add this to the file:

@font-family-body: Helvetica, Arial, sans-serif;

(or whatever)

This would change the default body font site-wide. You might need to do the same for @font-family__serif and @font-family__sans-serif.

Note: it's totally fine if _theme.less is just a few lines, since it's just variable overrides. To see the variables you're overriding / the ones available to override, check out lib/web/css/source/lib/variables

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.