Add googlefont : Early Access

[a040005]

Hello.
I’d like to add Early access Goggle font(all Korean fonts) into the dropbar section.
Because google font doesn’t provide any Korean font, yet. So now our homepage shows very ugly looking font. but, some fonts are in the early access page. If I can use Korean google font, that would be great for us.

Please let me know how can I add those fonts below.
http://www.google.com/fonts/earlyaccess

Hanna (Korean)
Nanum Brush Script (Korean)
Nanum Gothic (Korean)
Nanum Gothic Coding (Korean)
Nanum Myeongjo (Korean)
Nanum Pen Script (Korean)

[Melanie – SUPPORT]

Feel free to follow this tutorial:
http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

[a040005]

Thank you for the tutorial. It doesn’t work, though.
I want to use each font that depending on the character on every page of my site.
‘Open Sans’ font for English characters and ‘Nanum Gothic’ for Korean characters.

So I added the import code of ‘Nanum Gothic’ into custom.css field like below
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

and next, I applied code like below.

body, h6, #sidebar .widget-heading h3, #header-search input, .header-items h3.phone-number, .related-wrap h4, #comments-list > h4, .item-heading h1, .sf-button, button, input[type="submit"], input[type="reset"], input[type="button"], input[type="email"], .wpb_accordion_section h3, #header-login input, #mobile-navigation > div, .search-form input { font-family:"Din Text Pro Regular", Verdana, sans-serif; font-size-adjust:0.5; font-weight:normal; font-style:normal; }h1, h2, h3, h4, h5, .heading-font, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .wpb_call_text, .impact-text, .testimonial-text, .header-advert, .wpb_call_text, .impact-text { font-family:"Din Text Pro Regular", Verdana, sans-serif; font-size-adjust:0.5; font-weight:normal; font-style:normal; }nav .menu li { 
  font-family:"Open Sans","Nanum gothic" !important;}

I saw this code from Flexform forum => http://support.swiftideas.net/forums/topic/google-font-earlyaccess/

But, It didn’t work as it should. Korean Characters seems that doesn’t effected by those codes.
English characters appear in the ‘Open Sans’ font as well.

I need your help. Even I don’t know whether the code is right for neighborhood theme or not.
Please let me know how to implement it.

[goldforu]

Hey if using the @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); doesn’t work, try using @font-face.

STEPS
1. Download the font you want on the http://www.google.com/fonts/earlyaccess page.
2. Use this site to generate and download your @ font face code http://everythingfonts.com/font-face#.UvVAy_ldVDY.
-If you need a slight tutorial on @font face and how to use it, see this before starting step 2 http://code.tutsplus.com/tutorials/quick-tip-how-to-work-with-font-face–net-9219
3. Use an FTP to transfer the downloaded fonts generated from http://everythingfonts.com/font-face#.UvVAy_ldVDY into your neighborhood child theme folder.
4. Add the @font face generated css into your child theme style.css. Make sure the relative paths in the @font face generated css to the fonts you uploaded in step 3 are right.
5. Apply font to any tag on your site.

step 4 example from my child theme css

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothic/gothic.eot');
    src: url('gothic/gothic.eot') format('embedded-opentype'),
         url('gothicgothic.woff') format('woff'),
         url('gothic/gothic.ttf') format('truetype'),
         url('gothic/gothic.svg#CenturyGothicRegular') format('svg');
}

/*The css below is not part of the generated @font face css. Add it however because it solves issues with @font face and google chrome. Make sure you change the font name and relative path to the font to your own font name and relative path*/
@media screen and (-webkit-min-device-pixel-ratio:0) {

  @font-face {

      font-family: 'CenturyGothicRegular';

      src: url(‘gothic/gothic.svg#CenturyGothicRegular’) format(‘svg’);

  }

}

step 5 example from my child theme css

body, h1, h2, h3, h4, h5, h6 {
	font-family: 'CenturyGothicRegular', 'Lato', Helvetica, Tahoma, sans-serif !important;
}

Hope this helps!

[a040005]

Thank you for detailed explanation.
It works now~~~

[Melanie – SUPPORT]

Great!

Thank you goldforu!