#Inherit google font download how to
#Inherit google font download generator
#Inherit google font download update
#Inherit google font download code

#Inherit google font download how to

Here is my problem how to tell it to replace these fonts with mine.

#Inherit google font download code

In my custom template I have found this scss file where it is calling the typography scss, below is the code and I have bold the font it is using. The custom template calls the font in 2 places in the index file as CDN which I copied the code above and in an scss file. My problem now is how do I tell the template to replace their font with mine. Select all Open in new window Now what I have done is went to this site and customised my font to use in my app and downloaded the fonts as zip file. Infact before asking in EE I had a look at that but was not helpful in my case, since I am using a custom template and there it uses CDN method in the index.html and as I mentioned I want to be use it offline and add my own fonts since I am using font other then Latin.

Keep in mind that you will not see your new font within the dropdown.īe sure to save your changes as you complete the steps, and view your store to ensure the changes are working.Thanks for your comments. Now that you've updated the places you want to use this font in your HTML, you'll be able to edit the text as-usual within the Design editor. Since I've given my new font a class name (on line 11, above) called 'h1-roboto', I can use the following code around any text that needs this font: In this example, I am changing the homepage header on my 'index.html' page.

#Inherit google font download update

Update your HTML with the new font class.įind the HTML page which contains the text you are looking to change. In the below example I am adding the font Roboto Black (file named #Roboto-Black') format('svg') Ĥ. You will need to do this for each component.css that you're wanting to modify. Within your components folder, find the component.css file for the area your want to use the custom font. Add the font into your component.css file These next steps show you how to manually change the appearance of text within your site's HTML.ģ. Note: Uploading fonts here will not automatically put the font into your dropdown list in the Designer. You can download Filezilla, a free FTP client HERE.Ĭonnect to your store via FTP and create a new 'fonts' directory within the theme you are wanting to modify and drag your font files into the new directory: Upload the font files to your theme via FTP.

#Inherit google font download generator

Using a Webfont Generator such as Fontie or Font2Web, convert your font file into the following formats: TrueType (.TTF), OpenType (.OTF). Use a Webfont Generator to convert your fonts. Once you've found the font(s) you want to use, follow these few steps to add it into your site:ġ. You will need to call your custom font in the Code Editor and assign it to the elements you want to inherit your custom font. Another option would be purchasing a licensed font ( is a great source).Īdding your own custom font will NOT make it available through the dropdown font selector in the Designer. Attached is a quick demo on how to download a Google font to your computer.

Looking to use a custom font on your website? We recommend choosing a Google Font, as they're free and load the fastest. Not sure which designer you have? Check here. Note This article only applies to the new designer.