How to make Google Fonts viewable in China in Hype?

Elements Typography
1

Hello Hype,
I’m trying to add a Google Font to my website, but Google service is blocked in China.
I’ve looked up online for solutions, but I couldn’t figure out what to do since I’m not a developer at all.

Is there a simpler way to solve this problem in Hype?
Thanks,
William

2

Here’s one technique:

Also, google has made Google Fonts available for download here: https://github.com/google/fonts, so you can host them from your own domain.

The full zip file can be found here: https://github.com/google/fonts/archive/master.zip

To use them, you would add them as a Custom CSS font based on these instructions.

3

Hi Daniel,

I saw that post yesterday, and I couldn’t change the href in Hype… I also
saw
another article about using visitor’s location to change from Google to
useso.com

How can I change CSS or href in Hype?

4

Hello Daniel,

I’ve tried using your Custom Fonts method, but I’m not getting good results after following your instruction:

After adding the TTF files into the Resource Library, this is the first code I put in and it didn’t work…

@font-face { font-family: 'Open Sans'; src: url('${resourcesFolderName}/OpenSans-Light.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-LightItalic.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-Regular.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-Italic.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-Semibold.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-SemiboldItalic.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-Bold.ttf') format('truetype'), url('${resourcesFolderName}/OpenSans-BoldItalic.ttf') format('truetype'); }

I guess is because each entry should be only one TTF font, so I made changes as follow:

And it still didn’t work… what have I done wrong? Also, the instructions come with SVGs, EOT and other font type, but the the master file only includes TTF file. Is that why the Custom CSS Font didn’t show up properly?

William

5

This page has great guidance and examples files for using Open Sans Light:

http://qrohlf.com/posts/better-opensans/

If you add

font-weight:200

To that font’s style definition, it will likely show in the correct weight. If that doesn’t work, can you send the files that you have?

If you only have the TTF file, it will work in modern browsers. The other font files add additional browser support.

6

Hello Daniel,

After spending nearly 6 hours on my desk figuring out this problem, I realized the problem came from the “CSS font-family”… After changing the “font-family” from Open Sans to OpenSansRegular, it seems working properly now… Yay!
Should I add the “font-weight” and woff/eot/svg to it as well?

7

Glad that did the trick!

If you have those files and they are in the resource folder, referencing them will definitely give you broader browser support.