How to use Google's "think source Blackbody" as a webfont?

Want to make your site instantly improve texture? Try Google and Adobe launched the "source Blackbody"! now just add a piece of Typekit program code, you can use the source bold as a Web page font (webfont) used, attached to the specific use of the tutorial, to collect! "

I believe that everyone to "Siyuan (source Han Sans)" is not unfamiliar, this is the Adobe and Google cooperation, launched in 2014, the opening of the original code free font, providing seven kinds of thickness settings, complete support of Japanese, Korean, traditional and Simplified Chinese, in view of the free Chinese font choice is not much, In the development is also quite difficult, the introduction of a lot of people are concerned about the revised version of the font is also emerging, such as the previous introduction of the source of the soft black, the source is really black.

If you want to use the source bold as a Web page font (webfont), you may encounter bottlenecks, perhaps some problems to be resolved, Google Fonts has not put the source Han Sans page fonts. A recent search for information found that Adobe Typekit has already provided "source bold"webfont! "This also means that Web developers can freely load this beautiful font inside the site, just add a section of Typekit program code.

In addition to traditional Chinese, Typekit also has a total of four types of Chinese, Japanese and Korean fonts.

Adobe Typekit is not a free service, but there are free programs to choose from, registered 25,000 times a month to browse the number of times, for the general personal blog or small site is actually sufficient (of course, you can also consider a pay upgrade, the price is not high).

How to make your website text more beautiful, more texture? Through the teaching below, to apply for Typekit, and the source bold to join your site, replace the original default font bar! The overall operation is simple, but if your blog provider must support JavaScript syntax, And you want to be able to modify the CSS style form yourself.

　Typekit

Step 1

Open Typekit website, click on the top right corner of the "browse fonts", from the Limited Library can find the source Blackbody series, we want to use for source Han Sans Traditional is the traditional Chinese.

From "source Han Sans traditional chinese" can preview the display effect of the source bold in the Web page, with a total of seven words heavy, respectively, Extralight, Light, Normal, Regular, Medium, Bold, and Heavy, which only provides font downloads on the site, now also adds support for the Web (page fonts).

Click on the top right corner of the "sign up" button to start the registration bar!

Step 2

Enter the registration page, you can see the Adobe typekit pricing method, which has a free scheme, although the number of fonts can be used, but there are still 25,000 views per month, click the "sign up" selection scheme.

Step 3

Then enter your name, Email, password, country and birthday to register your account, if you already have the Adobe ID, you can login directly to start using.

Step 4

Login to the Adobe Typekit, back to the Source Han Sans Traditional Chinese page, click on the upper right corner of the green "+ use fonts" button.

After jumping out of the window below, select "web" from the Top tab and click Create a new kit to create a Web site setting.

Step 5

Jump out of a create a Kit new window, set the name of the site to be established, Web site, because this program code will be limited to the domain name you set up to use, the URL part must be set correctly Oh!

Examples can refer to the following gray text, no need to fill in the http://, just enter your domain name section.

When you're done, you'll create Install JavaScript, which is the program code you want to add to your Web page. But do not rush to copy, click "continue" back to the Typekit page to see if there are other settings options.

Step 6

Back to Typekit Web page, the mouse cursor moved to the upper right corner of the "kits", will show you just set up a good site name, click on the setting, will appear as follows.

From here you can set to use, load the source bold font character weight, the default will only have Regular and bold, in order to avoid the font loading speed slow, we recommend to maintain the default value, unless you have special needs.

Click on the top left corner of the "using fonts in css" can see the detailed CSS settings, if you want to use in the title section of the source bold, as long as the addition of a font-family set value, this part of the not much to do.

Step 7

Finally click on the lower right corner of the "publish" to publish the settings update, Typekit will be the JavaScript program code on the site! The user only needs to copy the program code, and then put it in the Web page </body> before it can load the source bold, To make the overall reading effect more ideal, more distinctive.

As for how to check the dosage situation? From the Typekit right corner of the "account" to see the current dosage, free scheme in addition to a monthly browsing limit of 25,000 times, can be added to the number of sites only one, can choose the page font has two.

What if the dosage is over? In fact, only the style of the Web page can not be loaded, it will not affect the site's display or reading, not too worried.

Three reasons to be worth a try:

SOURCE Bold page Font (webfont), can be used in Typekit

Support Traditional Chinese, Simplified Chinese, Japanese and Korean, provide seven kinds of optional word weight

Free program can use 25,000 times per month to browse quotas