Offline/Embedded Google Fonts

Feature Requests
1

Hi,

I think a nice and “not so time consuming to implement” feature would be have a checkbox to embed Google Fonts inside the Hype project. In my scenario I need, sometimes, to show a presentation offline: of course I can include them manually but is time consuming and can be easily automated. :wink:

MOCKUP

2

@Cescomare
I’m not sure you can download the full package. probably you can do it

However you can embed a lot of (not google) webfont but you must add the formatting code.
I used http://www.fontsquirrel.com/tools/webfont-generator in the past, very useful.

3

Thank you but mine was a suggestion to implement a feature to make the process easier… :stuck_out_tongue:

4

When you say it can be easily automated. Can you explain the process? apart from adding a checkbox. :smile:

D

5

All Google fonts can be downloaded from this URL (or at least those that have permissive licensing): https://github.com/google/fonts, so this would be possible. We haven’t heard many requests for this though. Thanks for the suggestion!

1 Like
6

Daniel you got it! :wink:

Basically:

  • there is already a Google Fonts manager integrated in Hype
  • if an user is not aware of “what” Google Fonts are or “how” they are integrated into the project, they won’t expect that they will work only online (need to be “dumb proof”)
  • so I would suggest at least to add a “warning” that explains that this feature need an Internet connection or, better, a checkbox to include the font inside the Resources, so the project will work also offline

In general, in my opinion, a project should be intended to work online or offline, so Hype should avoid the use of external resources (at least not by default). :wink:

1 Like
7

I would like to see this feature in one of the upcoming updates.

3 Likes
8

me as well…

a client just asked me to include the font in the zip so he will be able to view offline… @cescomare; you’ve sed “of course I can include them manually”, can you through an example? can it be done with other fonts/not just google ones…

thanks

9

Sure! Good you asked! :smiley:

Tutorial to add fonts manually:

  1. create all the web fonts needed with a website like fontsquirrel or google fonts
  2. open the CSS file and be sure that the path is the same folder of the CSS file

NO

src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');

YES

src: url('fontawesome-webfont.eot?v=4.5.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
url('fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
url('fontawesome-webfont.woff?v=4.5.0') format('woff'),     
url('fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
url('fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');

  1. add all the files to Hype (fonts and CSS)

  2. to make Hype see the font just add a font with the interface, but without adding any other code, be only careful to put the same font-family written in the CSS (the Display Name is up to you, is like you wanna call it in the Hype menu)

    @font-face {
    font-family: ‘FontAwesome’;

TIPS
Since Hype doesn’t support different font weights, just create different font-families names:

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;  

@font-face {
    font-family: 'Lato-Light';
    font-style: normal;
    font-weight: 300;
1 Like
10

@cescomare, this is greate! Thanks for the quick answer.

1 Like