Your Mega-Theme will by default come with a group of free Google Fonts we've chosen. If you want to change them, follow these instructions:
If you're using Typekit fonts (these instructions assume you know how to use Typekit - if not, see the instructions here):
- Locate the Embed Code Typekit provides and copy the Kit ID. If you're on the Typekit website, you can find it circled in red below [second image]. If you only have the actual code, it will be the part circled in green.
- Paste it into Theme → Settings → Typekit key.
- Not mandatory, but recommended for load times: go to Theme → Files → _nm-partial-font-scripts.scss.
- On lines 1-3 (as of time of writing), you'll find the font scripts [shown below in the first image]. Delete these lines.
- Now scroll down (on this page, not in _nm-partial-font-scripts.scss) where you'll find "Now you need to actually tell the theme to use the fonts:" and follow those instructions.
If you're using any font vendor besides Typekit (Google Fonts (100% free), Typography, Fonts.com are our favorites) (NOTE: these instructions assume you know how to use the font provider you've selected - if not, their help and support sections are easily findable on their websites):
- Copy the embed code or script the font vendor provides.
- Go to Theme → Files → _nm-partial-font-scripts.scss.
- On lines 1-3 as of time of writing, you'll find the font scripts [shown below]. Delete what's in between the <!-- Font Scripts Go Here --><!--/ Font Scripts Go Here --> comments and paste in your embed code or script.
- Now scroll down (on this page, not in _nm-partial-font-scripts.scss) where you'll find "Now you need to actually tell the theme to use the fonts:" and follow those instructions.
Now you need to actually tell the theme to use the fonts:
- Go to Theme → Files → _nm-variables.scss.
- On lines 63-66 (as of the time of writing), you'll find the theme font declarations [shown below]. The theme takes three fonts:
- $font-family-sans-serif: Line 63 (as of time of writing), the main font on your site - used by headings and anything that's not paragraph-type text.
- $font-family-serif: Line 64 (as of time of writing), the paragraph-type font for your site. Used mainly in page content sections where large blocks of text are likely to appear.
- $font-family-monospace: Line 66 (as of time of writing), used for button-type elements and the top navigation bar.
- Replace only the first font for each variable with your new font values. IMPORTANT: Leave the fallback fonts (the fonts after the first one) alone. For example, in the image below, you'd replace "Open Sans" for $font-family-sans-serif and $font-family-serif and "Open Sans Condensed" for $font-family-monospace, leaving all the fallback fonts (starting with Helvetica for $font-family-sans-serif and $font-family-serif and "Helvetica Neue" for $font-family-monospace) as they are.
