How to add and use a custom font in Pearl Theme Magento 2 ?

Note:

- Pearl Theme uses Google Fonts.

- In order to add a new custom font, you need to make CSS changes in the child theme and overwrite the desired Headings with the new custom font you just added.  Following one of the  solutions below:

Solution 1:

You can include the font in Pearl Child Theme by following Magento documentation: 

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html

Solution 2:

You can define the fonts yourself in Pearl Child Theme like in the example below:

@font-face {

font-family: 'Playfair Display';
src: url('../fonts/sitefont/Playfair Display.eot');
src: url('../fonts/sitefont/Playfair Display.eot?#iefix') format('embedded-opentype'), url('../fonts/sitefont/Playfair Display.woff2') format('woff2'), url('../fonts/sitefont/Playfair Display.woff') format('woff'), url('../fonts/sitefont/Playfair Display.svg#Playfair Display') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-2212;
}
@font-face {
font-family: 'Century Gothic';
src: url('../fonts/sitefont/Century Gothic.eot');
src: url('../fonts/sitefont/Century Gothic.eot?#iefix') format('embedded-opentype'), url('../fonts/sitefont/Century Gothic.woff2') format('woff2'), url('../fonts/sitefont/Century Gothic.woff') format('woff'), url('../fonts/sitefont/Century Gothic.svg#Century Gothic') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-F003;
}

NOTE: If you are not using Google Fonts anymore and you are using your own custom/local font, make sure to disable Google Fonts from Admin - Frontend Options section to avoid unnecessary calls to Google. 

Go to Admin -> Frontend Options -> H1, H2, H3, H4, H5, H6, Default, Default Buttons, Form Inputs and for the Google Font Family option, set "Use Predefined". Here is a screenshot where you can find this option in admin.

Make sure to change this for all sections under Frontend Options where google fonts are defined.

NOTE 2: If you need to apply the custom font to specific elements in your store you can use the class defined above, in our example it is class font-face. If you need to add the new font for a Heading, here is a short example that you can add to the Child Theme.

h1 {font-family: ''Playfair Display''}