Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I made it work after doing the following steps:</p> <p><strong>-Put your CSS in a file, for example <code>my_css.css</code>:</strong></p> <pre><code>@font-face { font-family: "customfont"; src: url("./fonts/arial.ttf") format("opentype"); /* Make sure you defined the correct path, which is related to the location of your file `my_css.css` */ } body { font-family: "customfont"; font-size:30px; } </code></pre> <p><strong>-Reference your CSS file <code>my_css.css</code> in your HTML:</strong></p> <p><code>&lt;link rel="stylesheet" href="./path_to_your_css/my_css.css" /&gt;</code></p> <hr> <p><strong>Pay attention to the definition of your paths!</strong></p> <p>For example, let's say you have the following directory structure:</p> <ul> <li><p><strong>www</strong></p> <ul> <li><p><code>your_html.html</code></p></li> <li><p><strong>css</strong></p> <ul> <li><code>my_css.css</code></li> </ul></li> <li><p><strong>fonts</strong></p> <ul> <li><code>arial.ttf</code></li> </ul></li> </ul></li> </ul> <p>Then, you would have:</p> <pre><code>@font-face { font-family: "customfont"; src: url("../fonts/arial.ttf") format("opentype"); /* Make sure you defined the correct path, which is related to the location of your file `my_css.css` */ } body { font-family: "customfont"; font-size:30px; } </code></pre> <p>and:</p> <p><code>&lt;link rel="stylesheet" href="./css/my_css.css" /&gt;</code></p> <hr> <p><strong>Note:</strong> if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...). </p> <p>So, you may try to impose your style by using the style attribute.</p> <p>Eg:</p> <pre><code>&lt;body&gt; &lt;h&gt;Custom Fonts&lt;/h&gt; &lt;div style="font-family: 'customfont';"&gt;This is for sample&lt;/div&gt; &lt;/body&gt; </code></pre> <p>One drawback is that it seems that the <code>style</code> cannot be applyied on <code>body</code>...</p> <p>So, if you want to apply the font to the whole page, you may try something like this:</p> <pre><code>&lt;body&gt; &lt;!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE --&gt; &lt;div style="font-family: 'customfont';"&gt; &lt;h&gt;Custom Fonts&lt;/h&gt; &lt;div &gt;This is for sample&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Hope this will work for you too. Let me know about your results.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload