Hi there, I’m looking to add the Google Font, Manrope to my theme. Could you please provide instructions on how to do so? Thanks!
Hi!
I’ve found these guidelines to be very clear and helpful.
http://docs.minionmade.com/developer-tools/use-google-fonts-on-your-website
However, adding a Google Font by referring to the Google CDN can be bad for performance. It’s always best to self-host fonts.
You should download the Font and add it to your Shopify store/theme as an asset.
https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme
You can download the font from the Google Fonts website (bottom right corner) but it will only give you the TTF files though.
I would recommend using a converter tool like https://onlinefontconverter.com/ to convert the fonts to EOT (only format that works in IE8-11 if you still want to support those browsers) and WOFF (these will load faster than TTF). WOFF2 will load even faster still due to better compression but has less browser support.
This website also holds all Google Fonts where you can download them in all formats. http://google-webfonts-helper.herokuapp.com/fonts/manrope?subsets=latin
I hope this helps.
Thanks! I’m stuck on the last part (step 4). I’m not sure what to input in my CSS selector, could you please take a look?
Site preview:
Hi!
When looking at your store, I notice they use what we call “CSS Variables”.
This will make it a lot easier for you since there will be only one place where you’ll have to define the new font-family after which it will apply to all headings throughout the store (at least, I’m suspecting you want to apply it to headings and not all other text).
The name of the variable is “–font-stack-header”. Find the CSS file of the theme and search for the following: “–font-stack-header:”. Notice the colon on the end. This will be where the variable is defined.
It will look something like this
--font-stack-header: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
Add the custom font first in line, before (on the left of) Helvetica. If the name has two words, it needs to be wrapped in quotes (").
I hope this will help you beyond step 4 
- Paul
p.s. your shop is looking very kawaii, I like it 
1 Like
Thank you!
When you are inspecting, how did you find the :font-family: “Manrope”(–font-stack-header); ? I can only see the
Choose your character
part on my screen.I’m also unable to find the --font-stack-header: section in my CSS.
I found a few of these: font-family: “Manrope”(–font-stack-header); under various titles so I changed them all to Manrope but it’s not working in some places.
Please let me know what you advise appreciate it
I found out how you got that bar below (drag up) and I managed to create my own rules. Thanks for your help and compliment