How to add Google Fonts to the Photics "Book" Template?


(ism) #1

nice template but when added new font, cant use buttons. After removing font, it works again. Changing the font not works, or adding image buttons not working too…


Free Hype Templates
#2

Where’s the font coming from? Is it a remotely hosted font like Google Fonts, or are you adding to fonts to the project?

I looked at the documentation…

I’m not sure why adding a font would break a button. Are there any errors in the browser’s developer console?


(ism) #3

added a google font, or local font. both of them not working…
you can test both of them here…

THIS IS ORIGINAL FILE OF YOU;
book.hype.zip (120.0 KB)

AND THIS IS A WEB-FONT ADDED FILE;
bookCustomFont.hype.zip (120.4 KB)


(Jonathan Deutsch) #4

Where are you attempting to use the font in the bookCustomFont.hype document? I don’t see any elements with Roboto selected. If I select the main “Text” element from each scene and click on “Roboto” in the Typography Inspector, it changes to Roboto for me.


(ism) #5

It changes to Roboto, but then, you cant touch plus or minus buttons then. You can see these buttons after touching settings (gear) icon.
Original hype file, you can touch these buttons, but when you import a font(google for example) you cant touch these buttons. Second hype file is example for this.


(ism) #6


here is a video: Original file is working nice…
But after adding a font from Google, plus or minus buttons are not working.


#7

It’s not the buttons that are broken. It’s the JavaScript triggered by pressing the buttons. Here are the related lines in the “text” JavaScript file…

var s = document.styleSheets[1];
s.deleteRule(0)
s.insertRule(".texty { font-size: " + zoom + "px !important; line-height: 150% !important; }", 0);

Basically, “texty” is a style class in the Head HTML. Every time a button is pressed, the “texty” class is deleted. (That’s the s.deleteRule part. Zero is the first one in the array.) Then, an updated “texty” class is added (insertRule) to the style sheets.

When a Google Font is added, Hype adds more information to the Head HTML, which shifts the order of the styles. So, changing…

var s = document.styleSheets[1];

…to…

var s = document.styleSheets[2];

…should solve the problem.