Japanese Fonts (edit)
- Noto Sans Japanese
- Hannari (Japanese)
- Meiryo
- ＭＳ Ｐゴシック
- MS PGothic
- Osaka
Technical Considerations
<!doctype HTML>
<html lang="en-us" />
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 lang="ja-jp">日本語</h1>
Technical Debt
<!doctype HTML>
<html lang="ja-jp" />
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>日本語</h1>
Software Requirements Specification (SRS)
- CSS Flexbox
- Google Fonts
- Font-awesome icons
- Japanese language
- Responsive Web Design
- VS Code
- CSS3 + Bootstrap4 + HTML5
How to add icons to your website using font awesome VS Code | Bring Your Own Laptop (All in one + source)
ページが見つかりません | Drupal専門の開発会社 Studio Umi (studio-umi.jp)
Google Fonts — Responsive Web Design
Ví dụ một trang web tiếng Nhật
ページが見つかりません | Drupal専門の開発会社 Studio Umi (studio-umi.jp)
Better together: Displaying Japanese and English text on the web | by Rachel Simone Weil | Prototypr
What every JavaScript developer should know about Unicode
What every JavaScript developer should know about Unicode (dmitripavlutin.com)
Making the Korean and Japanese web beautiful & fast
S5T3-Sheeter.pdf (unicodeconference.org)
Smashing Magazine — For Web Designers And Developers
HTML ISO Language Code Reference (w3schools.com)
What is "Google Fonts"?
● Free, open-source, font collection
● Free, public, content delivery
● We want to serve all Google users
Get Started with the Google Fonts API | Google Developers
Google Fonts + Japanese • Google Fonts + 日本語 (https://googlefonts.github.io/japanese/)
Noto Sans Japanese - Google Fonts (https://fonts.google.com/noto/specimen/Noto+Sans+JP)
How to use Google Fonts in your next web design project (freecodecamp.org)
20 Best Google Web Fonts (awwwards.com)
CSS Google Fonts (w3schools.com)
Responsive Web Design with Google Fonts
Improving Performance with Google Fonts
Improving Performance with Google Fonts - Responsive Web Design (responsivedesign.is)
CSS Google Fonts (w3schools.com) (CSS Fonts)
The ultimate prototyping tool to rule UX and UI design (justinmind.com) (Prototyping Tool)
css - Japanese standard web fonts - Stack Overflow
Web-font for Japanese, though there are few providers exist, is not really practical as you found the size of the font data is too big to download. Usually Japanese font has 8,000-16,000 glyph so making new fonts means you need to make at least 8,000 glyph, which is pretty heavy task. As a result of it, there are very few variations in Japanese fonts, and Japanese users also care about fonts less than Latin-character users.
Most Japanese websites use default font sets provided on Windows or Mac. The latest ones are Meiryo and Hiragino Kaku Gothic Pro. For older versions such like Windows XP, it is good to add former default fonts MS Gothic(or MS Mincho)/Osaka.
Some old browsers could not understand those font names in English, some others do not recognize the names in Japanese, so it is safe to write both in Japanese and English.
Meiryo and Hiragino's order is, because Mac users may have Meiryo from MS-Office, and Hiragino is more familiar and matching well on Mac, better by starting Hiragino series.
So the current recommended practice is like this,
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
html - Japanese Text not showing correctly - Stack Overflow
The problem, apparently, is that the encoding which you have declared (Shift_JIS) no longer matches the actual encoding used (probably UTF-8), and so the browser renders garbage. Either that, or your browser doesn't recognize the Shift_JIS encoding.
What may have happened is that when you edited the source, your text editor re-wrote the text in its preferred encoding, which differed from Shift_JIS. It's not possible to tell which encoding your current source file is in based on the code you posted; we'd need to have the raw file.
Another possibility is that your source is, in fact, encoded in Shift_JIS correctly, but your server is serving the page with a mis-matched Content-Type header which is overriding the <meta> tag.
In any case, I would recommend switching things entirely to UTF-8 where possible.
Try changing the declared charset of your page to UTF-8 (maybe add the modern <meta charset="utf-8"> tag while you're at it). If that doesn't work, try these steps:
- Convert the original source to UTF-8
- Open the original source in your editor
- Ensure that the text displays properly in the editor (means the editor recognizes the encoding)
- Use the editor's settings to re-save as UTF-8
- Change the declared encoding to UTF-8
- Apply your changes
