A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!
å½ããã°ã®ä¸é¨ã®ãªã³ã¯ã¯ã¢ãã£ãªã¨ã¤ããªã³ã¯ã§ãããããã®ãªã³ã¯ããååãè³¼å ¥ãããå ´åãå½ãµã¤ãã¯ä¸å®ã®å ±é ¬ãå¾ããã¨ãããã¾ãã ã¦ã¼ã¶ã¼ã®ç«¯æ«ã«ã¤ã³ã¹ãã¼ã«ããã¦ããªããã©ã³ãã表示ã§ããWEBãã©ã³ãã便å©ãªåé¢ãæ¥æ¬èªãªã©æåæ°ãå¤ããã©ã³ãã§ã¯ãã¡ã¤ã«ãµã¤ãºã大ãããªããéä¿¡éãå¢ãã¦ãã¾ãã®ãé£ç¹ã§ãã ãããããããªæ¥æ¬èªãã©ã³ããGoogleã®WEBãã©ã³ããµã¼ãã¹ãGoogle Fontsãããµãã¼ããã¾ãããã¨ãã£ã¦ãã以åããæ©æã¢ã¯ã»ã¹ã¨ãã¦æä¾ã¯ããã¦ãã¾ããããæ£å¼çã«ãªã£ãã¨ãããã¨ã®ããã§ãã å©ç¨å¯è½ãªã®ã¯ã´ã·ãã¯6種 + ææ2種ã®8æ¸ä½ãæ©æã¢ã¯ã»ã¹ã§æä¾ããã¦ãããã®ã¨ã¯æ¸ä½ãç°ãªãã¾ãã Noto Sans JP Noto Serif JP Sawarabi Mincho Sawarabi Gothic M PLUS 1p M PLUS Roun
Googleãã©ã³ããªã©ãWebãã©ã³ãã®ãã¼ãã¯ã©ãããä»çµã¿ãªã®ããã©ã®ããã«å¯¾å¿ã§ããã®ããGoogleãã©ã³ãã®è¡¨ç¤ºã®æé©åã«ã¤ãã¦ç´¹ä»ãã¾ãã å½ããã°ã§ãæ¥æ¬èªã®Googleãã©ã³ããå°å ¥ãã¦ã1ãµæãçµã¡ã¾ããã æåãèªã¿ããããªã£ãã¨ããå©ç¹ã¯é常ã«å¤§ããã§ããããã¼ãã«æéãããã£ã¦ãã¾ãã¨ããæ¬ ç¹ãããã¾ãã Web fonts, boy, I don't know ãã£ããã£: Google Fonts + æ¥æ¬èª æ©æã¢ã¯ã»ã¹ ä¸è¨ã¯åãã¤ã³ããæ訳ãããã®ã§ãã â»å½ããã°ã§ã®ç¿»è¨³è¨äºã¯ãå ãµã¤ãæ§ã«ã©ã¤ã»ã³ã¹ãå¾ã¦ç¿»è¨³ãã¦ãã¾ãã Googleãã©ã³ãã®ãã¼ãã«ä½ã注æãã¹ãã Webãã©ã³ãã®å®è£ ã«å½¹ç«ã¤ãªã½ã¼ã¹ Googleãã©ã³ãã®é 延èªã¿è¾¼ã¿ ã¾ã¨ã Googleãã©ã³ãã®ãã¼ãã«ä½ã注æãã¹ãã ç§ã¯ãã³ãã³ã§éå¬ããããPolymer Summit
ä»æ¥ã¯ãWebãã©ã³ãã®è©±é¡ããæ¥æ¬èªWebãã©ã³ãã¯ãã使ããããã§ãéããªãããã¡ãã£ã¨ãã¨ãã人ãå¤ãã¨æãã¾ããã§ããã°ã¼ã°ã«ãã¯ã©ã¦ãä¸ã§Webãã©ã³ããæä¾ãå§ãããã¨ã§â¦â¦ã ã°ã¼ã°ã«ãæ¥æ¬èªã®Webãã©ã³ããã¯ã©ã¦ãã§æä¾éå§ã°ã¼ã°ã«ãæ¥æ¬èªã®Webãã©ã³ããæä¾ãå§ãã¦ãã¾ãããå®ã¯ã2014å¹´7æãããã£ããããã®ã§ãããç§ã¯ã¤ãæè¿ã«ãªã£ã¦ç¥ãã¾ããã ãã®åãããNoto Sans Japaneseãããã®ãã¼ã¸ã®è¡¨ç¤ºãããNoto Sans Japaneseãã«ãã¦ããã¾ãã Noto Sans Japaneseã¯ã6934æåã«åæ¸ãããµãã»ããçãæä¾ããã¦ãããã¦ã§ã¤ãï¼å¤ªãï¼ã7ããªã¨ã¼ã·ã§ã³ã1ã¦ã§ã¤ããããç´4.5Mãã¤ãã»ã©ã®ãµã¤ãºã§ãã 使ãæ¹ãç°¡åã«èª¬æããã¨ãCSSã§å®ç¾©ãã¡ã¤ã«ãèªã¿è¾¼ã¿ã <style> @import url(http:/
Google Fontsçã®Source Sans Proã¯ãªãªã¸ãã«ã¨å¾®å¦ã«éãã¨ããããããå¤ãã¯ã»ã¨ãã©æ°ã¥ããªããããªãã®ã ããç¨ã«é¡èã«ç¾ãããã¨ãããå°ããåãä»ã¾ã§æ°ã¥ããä¸ã§æãé¡èãªãã®ã¯Extra Lightã使ã£ãæã«38px以ä¸ã«ããã¨ãæåã®ã¹ããã¼ã¯ãExtra Lightã«è¦ããªãç¨åº¦ã«å¤ªããªã£ã¦ãã¾ãã¨ããåé¡ã ã Demo: Source Sans Pro æå ã®Windowsã§ã¯ã»ã¨ãã©ãã¹ã¦ã®ãã©ã¦ã¶ã¼ã§åç¾ãããClearTypeæå¹ã»ç¡å¹ãå¤ãOSã ã¨ã¾ãå¤ãããããããªããiPhone 5sã®Mobile Safari 8ã§ã¯åç¾ããªããããããä¸ä»£ã«ãã£ã¦å¤ãããããããªãã太ããªãã ãã§ãªãæ±ããªã£ã¦ãã¾ãã®ã§ããªããªãå³ããã ããã«æ°ã¥ããã®ã¯çµæ§åã§ãGoogle Fontsã®ãã©ã³ããã¤ãã¤ãä¿¡ç¨ã§ããªãã¨ãããã£ããã«ãªã£ããåç¾æ§
2014å¹´7æ16æ¥ã«ãGoogle 㨠Adobe ããªãªã¼ã¹ãã Noto Sansï¼Adobe ãã㯠Source Han Sans ã¨ããå称ã§ãªãªã¼ã¹ï¼ã¨ãããªã¼ãã³ã½ã¼ã¹ã®ãã©ã³ããã¡ããªã¼ã¯ãæ¥æ¬ã®Webãã¶ã¤ã³å²ä¸ã«æ®ãç»æçãªãã©ã³ããã ã¨æã£ãã®ã§è¨äºã«ãã¾ããã ããã¾ã§ã®åé¡ ã¦ã¨ã¤ãã®ä¸è¶³ æ®æ®µWebãã¶ã¤ã³ãªã©ã®ä»äºãããã¦ããæ¹ã§ãªãã¨ãã¾ãæ°ã«ãããã¨ã¯ãªãããããã¾ãããããã¨ãã° Android ã¯ãã¢ããªã«ãã£ã¦ã¯ä¸è¨ã®ããã«æ¥æ¬èªé¨åã¨è±æ°åé¨åã§å¤§ããã¦ã¨ã¤ãï¼ãã©ã³ãã®å¤ªãï¼ãç°ãªããã¨ãããã¾ããã â»ãã®ç»åã¯ãNexus 7ï¼Android 4.4ï¼ã§ Twitter å ¬å¼ã¢ããªã表示ããæã®ãã®ã§ãã Nexus 7 ã§ã¯ Chrome ãã©ã¦ã¶ã¼ãªã©ã§ã¯æ¥æ¬èªã»åè§è±æ°åã¨ãã«ä¸¸ã´ã·ãã¯ã§è¡¨ç¤ºãããã¦ã¨ã¤ãããããããªãã®ã§ãããã¢ã
ãä¸è©±ã«ãªã£ãGoogle Fontsãããã¦èªåã§WOFFãã¡ã¤ã«ããã¹ãã£ã³ã°ããããã«å¤ãããæ¬å½ã¯3.1ã«ãªã£ã¦ããããªãã¼ã¸ãåºæ¥ãFira Sansã«ãããããªã¨æã£ã¦ããã ãã©ãå¾®å¦ã«ããããªæã(æå³ããªãã¹ã¯ãã¼ã«ãã¼åºç¾ã®åå ã«ãªã£ãããã)ããã£ãã®ã§Source Sans Proã®ã¾ã¾ã Google Fontsããããã®ã¯ã¡ã³ããã³ã¹ä¸ã®çç±ãããå ¨ãã¼ã¸ãéçãã¡ã¤ã«ã«ãªãã¤ã¤ããã®ã§ãCSSã¯åä¸ã®ãã¡ã¤ã«ã§ç®¡çãããã©ã³ãã®å¤æ´ãCSSå ã§å®çµãããä¸å 管çãããã¨ãããããGoogle Fontsçµç±ã®å ´åã¯linkè¦ç´ ã@importã«ã¼ã«ã§ã®èªã¿è¾¼ã¿ã«ç¸ããããããã¨ãã©ã³ããå¤æ´ãããã¨ããæãåè ã®å ´åã¯å¤§éã®HTMLã§ã®å¤æ´ãå¿ é ã«ãªãããå¾è ã®å ´åã¯ããã©ã¼ãã³ã¹ä¸ã®åé¡ãããã Google Fontsã«æãã¨ãªãã¨ããã®CSSãã@font
Google Web Fonts ã®ã¦ã§ããã©ã³ãã«ã¯ IE 8 以ä¸ã§ã¡ãã£ã¨ãããã°ãããããã®ãµã¤ãã§ããã£ã¨æ¾ç½®ãã¦ãã®ãããããç´ãã¾ãã⦠<head> ... <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"> ... </head> ãã¨ãã°ä¸è¨ã®ããã«æ¸ãã°ãOpen Sans ã®ã¦ã§ã¤ã 400 (ãã¼ãã«) 㨠700 (ãã¼ã«ã)ãããã¦ããããã®ã¤ã¿ãªãã¯ã®è¨ 4 æ¸ä½ãèªã¿è¾¼ã¾ããããã¨ã¯ CSS ã§ãµã¤ãã« h1 { font-family: "Open Sans", sans-serif; font-weight: bold; } ã¿ãããªæãã§æå®ãå¯è½ã Fig 1: Open Sans on
å ã®ã¨ã³ããªã¼ï¼å®çªæ¸ä½ã«è¿ä¼¼ãªGoogle Fontsã®å¯¾å¿ä¸è¦§ ï¼ã§ã¯ãæ®æ®µä½¿ãã®ãã©ã³ãã«è¿ããã®ãGoogle Fontsããé¸ã¶ã¨ããã¢ããã¼ãã§ããããã®éãããã§ãããã Google Fontsããã¦ã³ãã¼ãããæé Google Fontsã®ãã¼ã¸ã«è¡ã£ã¦ã使ããããã©ã³ããæ¢ããï¼»âï¼½ãã¿ã³ãã¯ãªãã¯ãã¾ãã ï¼»Add ï¼ãã©ã³ãåï¼to your collectionï¼½ãã¿ã³ãã¯ãªãã¯ããï¼»âï¼½ãã¿ã³ãã¯ãªãã¯ãã¾ãã ï¼»Download fontsï¼½ã¨ããå°ããã¦ã£ã³ãã¦ããããã¢ããããã®ã§ããã®ä¸ã®ã.zip fileããã¯ãªãã¯ãã¦ãã¦ã³ãã¼ããã¾ãã ãã¦ã³ãã¼ããããã©ã³ãã解åããã¤ã³ã¹ãã¼ã«ãã¾ãã 追è¨ï¼ Plus One Dayã®ã»ãã·ã§ã³ã«ã¦ãTypekitã®ã¢ããã³ãã¼ã¸ã¯ãWebãã©ã³ãã¨ãã¹ã¯ãããã§å ±ç¨ã§ãããã¨ãã¨ãä¼ããã¾ãããï¼ã¹ã©
â»ãã®è¨äºã¯2014å¹´1æ6æ¥ã«å·çãããè¨äºã§ããç¾å¨ã¯å 容ãç°ãªãå¯è½æ§ãããã¾ãã ããã¾ãã¦ããã§ã¨ããããã¾ãï¼å®çªãã©ã³ããæãã¦ãã¾ãªãããã¶ã¤ãã¼ã®ã¿ã«ããã§ããä»æããTypeSquareã®ãMORISAWA PASSPORTãã©ã³ããå§ã¾ãããã§ãå½å ãµã¤ãã§ãWebfontã®ä½¿ç¨ãä¸æ°ã«å¢ãããã§ããï¼ ããã§ä»åã¯ãWebNAUTã§ã使ç¨ãã¦ããWebfontãµã¼ãã¹ãGoogle fontsããããå®çªãã©ã³ãã®ä»£ããã«ä½¿ããããªæ¸ä½ããªã¹ãã¢ãããã¾ããã å®çªãã©ã³ããã«ã¿ãå¥ã«ããã¯ã¢ãã ä»åã¯å®çªãã©ã³ãã®åããé²ãããã«ãèª æå æ°å 社ãABCã®ã¿ã»ããããã¡ã§è¦åãããã©ã³ãã¬ã¤ããããåèã«æ¬¡ã®ãããªã«ãã´ãªã§åé¡ããã¦é ãã¾ããã Historical Script æ´å²çæ¸ä½ Serif ã»ãªãæ¸ä½ Hybrid ãã¤ããªããæ¸ä½ Sans Se
ç¾å¨ã欧æãä¸å¿ã«600以ä¸ã®æ¸ä½ãé¸ã¹ãGoogleWebãã©ã³ããããã ãæ°ãå¤ãã¨ãã©ããé¸ã¹ã°ããã®ãæ¥æ¬äººã®ç§ãã¡ã«ã¯ããåããã¾ããã ä»åã¯ãå ¨ä¸çã§æã使ããã¦ãã人æ°ã®GoogleWebãã©ã³ãã10åå³é¸ãã¦ãå±ããã¾ããæµ·å¤åãã®ãµã¤ããä½ãéã«ã¯ããºããªããæ¥æ¬åããµã¤ããä½ãéã«ãã¢ã¯ã»ã³ãã¨ãã¦ä½¿ããããã¨ã£ã¦ããã®GoogleWebãã©ã³ããéãã¾ããã GoogleWebãã©ã³ãã使ãã¡ãªãã GoogleWebãã©ã³ãã使ãã¨ããããªã«ãããããã®ã¡ãªãããããã¾ãã SEO対çã«ãªã ä¿®æ£ãç°¡åã«è¡ãã é¸æãã¦ã³ããã§ãã æ¡å¤§ç¸®å°ã»é«è§£å度ç»é¢ï¼Retina Displayãªã©ï¼ã§ããã±ãªã 使ããªãæã¯ããã¾ããã GoogleWebãã©ã³ãã®ä½¿ãæ¹ ä½¿ãæ¹ã«é¢ãã¦ã¯ãOZPAããã®ããã°ã詳ããã§ããåèã«ãã¾ãããã ä»ãããªããWe
ã©ã³ãã³ã°
ã©ã³ãã³ã°
ã©ã³ãã³ã°
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}