Blockshop - Typography

You can configure your store's fonts in General Settings > Typography for the  main menu, headings, body text and accent text (buttons)
Themes are bundled with recommended Google fonts and web standard fonts. You can also import any font from Google Fonts and Typekit libraries using your Advancing Settings file, shown below. 

Importing Google Fonts (Advanced Settings) 

You can import any font from Google's fonts to use in your store. To do this, navigate to Edit Code >  Snippet > advanced-settings.liquid

In the example below, we import Rubik to use as the theme's heading and accent font. 

1. Click 'Select this font'

2. Copy the font name

3. Paste in the font name to the relevant area (this will override the font in the theme settings).

Importing Typekit Fonts (Advanced Settings) 

Create a new kit and skip the installing javascript step.  New to Typekit? Create an account.
Go to your Edit Code >  Snippet > advanced-settings.liquid, you will need to add a unique  Typekit ID and the font families names you want to import.   

Go back to Typekit, and launch your kit editor. The ID can be found at the end of the the url show in the black box below: 

Find a font you want to use and add it to a kit. In the Kit editor, select your font and click the 'Using fonts in CSS' link as shown in the image above.

Copy the this name and paste it into your settings into the typekit fields in your advanced settings file - making sure not to include the quotations "" as show below. 

If you would like to make additional customzations to the theme's typography - refer to guide on how to edit HTML/CSS and template code

Still need help? Contact Us Contact Us