AndroidとiOSのフォントを統一したい。

やりたい事

AndroidとiOSで表示されるフォントを統一したい。
Monacaプロジェクトにフォントを組込んでアプリ上でそのフォントを参照したい。

試したこと

GoodDog.otfをダウンロードして、クラウドIDE上にアップロード

-「 Webフォントを使ってみよう」に記載されている内容を実施

検証結果

クラウドIDE上のプレビューではフォントが変わっていた（GoodDog.otfが適応されていた）。
Android/iOSのMonacaデバッガー上で見たら変わっていなかった。

補足

外部サーバーにあるWebフォントで試した見たらMonacaデバッガーうまく行った。
<link href='http://fonts.googleapis.com/css?family=Shojumaru' rel='stylesheet' type='text/css'>をindex.htmlに記述し、cssを調整したらうまく変わった。

下記がそのプログラムコード
style.css

@font-face {
    font-family: 'GoodDog';
    src: url('/fonts/GoodDog.otf') format('opentype');
}
h1 { font-family: 'GoodDog'; }

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
</head>
<body>
	<br />
    <h1>This is a template for Monaca app.</h1>
</body>
</html>

yoshinavi

2018/06/08 01:30 編集

ダウンロードしたフォントの拡張子、パスは合っていますか？また、「@font-face」に「 font-style:」「font-weight:」も記入してみてください。環境によってローカルでの表示がされない場合もあるので、ローカル表示対応もされると良いかもです。（一部編集しました）

MonacaSommelier

2018/06/08 03:47

ありがとうございます。パスはあってました。font-style:等を追加してみましたが、結果は変わりませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

「CSS」ファイルと「fonts」ファイルが同相であるならば、パスの指定が良くないのでは？

提示コードでは、スラッシュの前の「.（ピリオド）」が無いので、「./」とするか、スラッシュを取るかで試してみてください。

投稿2018/06/08 06:42

yoshinavi

総合スコア3523

MonacaSommelier

2018/06/08 06:48

スタイルシートで src: url('../fonts/GoodDog.otf') format('opentype'); すればうまく行きました。ありがとうございます。

yoshinavi

2018/06/08 07:05

解決されて何よりです。 (^^)

行動規範の内容に同意します

本当の解決になったかはわかりませんが、下記のようにしたら
Monacaデバッガーでもフォントが変わりました。
要するにHTMLにスタイルを記述しました。
これと同じ内容をstyle.cssに記述したら、プレビューでは
変わりましたが、Monacaデバッガーでは変わりませんでした。
結局CSSがうまく利いていないと言う事でしょうかね。。。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>

<style type="text/css">
<!--
@font-face {
    font-family: 'GoodDog';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/GoodDog.otf') format('opentype');
}
h1 { font-family: 'GoodDog'; } 
-->
</style>

</head>
<body>
	<br />
    <h1>This is a template for Monaca app.</h1><br>
</body>
</html>

投稿2018/06/08 03:52

MonacaSommelier

総合スコア28