1. Create a text object to which you would like to apply a custom font.
2. Open a new browser tab and go to
Google Fonts repository
3. Pick the font you like by clicking an arrow symbol ("Quick Use")
4. On the page of the font find a paragraph that mentions how to add the font ("3. Add this code to your website")
5. From the code given select and open URL of the font:
(open it in your browser).
6. Copy the code and paste it into the "/code" section of your page (http://yoursite.hotglue.me/the-page/code) surrounding the code with <style> and </style> tags as follows:
<style>
@font-face {
font-family: 'Caesar Dressing';
font-style: normal;
font-weight: 400;
src: local('Caesar Dressing'), local('CaesarDressing-Regular'), url(http://themes.googleusercontent.com/static/fonts/caesardressing/v2/2T_WzBgE2Xz3FsyJMq34T2P6V2CHcxaChb7jOf5qsHM.woff) format('woff');
}
</style>
7. Next open another tab and go to "/edit" mode of the page. There click your text object and click again on "target" icon. You will see a string like: "my-text.head.137512284733" - copy it and go back to the tab with "/code".
8. Paste the following definition that includes the target name of your text element into the "style" definition under "/code":
div[id="my-fonts-example.head.137512284733"]
{
font-family: 'Caesar Dressing', serif;
}
9. The resulting "style" definition will look like the following:
<style>
@font-face {
font-family: 'Caesar Dressing';
font-style: normal;
font-weight: 400;
src: local('Caesar Dressing'), local('CaesarDressing-Regular'), url(http://themes.googleusercontent.com/static/fonts/caesardressing/v2/2T_WzBgE2Xz3FsyJMq34T2P6V2CHcxaChb7jOf5qsHM.woff) format('woff');
}
div[id="my-fonts-example.head.137512284733"]
{
font-family: 'Caesar Dressing', serif;
}
</style>
10. Now your text element should have the appropriate font style! You can adjust size and color using standard Hotglue tools. Repeat for any new font ;)
P.S. You can apply one font to several objects, just mention those objects in the definition (separated with a comma):
div[id="my-fonts-example.head.137512284733"],
div[id="my-fonts-example.head.137512284786"],
div[id="my-fonts-example.head.137512285347"]
{
font-family: 'Caesar Dressing', serif;
}
to apply one font to all text object simply assign your custom font to be default font for the whole page (<body>)
body
{
font-family: 'Caesar Dressing', serif;
}