質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

Q&A

1回答

2899閲覧

Windows上のChromeで、ローカルのNotoフォント(太字)を使いたい

maisumakun

総合スコア145121

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

0グッド

5クリップ

投稿2018/02/28 02:40

前提・実現したいこと

デザイン上Noto SerifをWebフォントとして使用しているページがあるのですが、重いし使う人が限られる状況ので、ローカルにあればローカルから取得しようと考えました。ところが、Chromeだけうまく反映されなくなっています。

そのままでも動くといえば動くのですが、ローカル参照で解決させる方法はないものでしょうか。

発生している問題・エラーメッセージ

ローカルにフォントインストールした環境でも、Webフォントのダウンロードをしてから表示するので、正しい表示を得られるまでに時間がかかる

該当のソースコード

scss

1@font-face{ 2 font-family: 'NotoSerif'; 3 src: local('Noto Serif CJK JP SemiBold'), 4 local('Noto Serif CJK JP 中太'), 5 // もちろんこれにはアクセスできます 6 url(https://example.com/path/to/NotoSerifCJKjp-SemiBold.otf); 7 font-weight: bold; 8}

試したこと

  • CSSのフォント指定をlocal('Noto Serif CJK JP')にしたところ、ローカルのフォントを使うようにはなったのですが、太字が効かなくなりました。
  • こちらのQiita記事デモページを確認しても、Chromeだけ全ウェイトをネットワークダウンロードとなっています(Firefoxは全てローカルから参照、IE11はなぜかRegularだけダウンロード)。

補足情報(FW/ツールのバージョンなど)

  • Windows 7 x64
  • Google Chrome 64.0.3282.186(Official Build) (64 ビット)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

font-weight:の指定を数値ではどうですか?

私も「Noto Serif」をローカルに入れてWebフォントとして使用しています。指定は数値で現在問題なく表示されます。

-追記-
現在使用している指定方法です(太字のみ抜粋)

CSS

1@font-face { 2 font-family: 'Noto Serif JP'; 3 font-style: normal; 4 font-weight: 900; 5 src: url(./example/NotoSerifCJKjp-Black.woff2) format('woff2'), 6 url(./example/NotoSerifCJKjp-Black.woff) format('woff'), 7 url(./example/NotoSerifCJKjp-Black.otf) format('opentype'); 8 9}

すみません。質問をよく読んでなかったです。ローカルでの読込にはしていなかったです。
m(_ _)m


-追記2-
以下のリンクは参考になるでしょうか?

ウェブフォントを使用するとデフォルトのfont-style: boldがnormalになる
太字のバージョンを指定していない@ font-faceを使用している場合、font-weight CSSプロパティは無視されます。

投稿2018/02/28 10:09

編集2018/03/05 06:21
yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問