FANDOM


  • I really want to improve my wiki

      Loading editor
    • <font color="red">hi</font>

      gives: hi

      The full list of fonts can be found here.

        Loading editor
    • font is deprecated, so it would be better to use span.
      <span style="color: red;">Text.</span>
      Also, I am not entirely sure if the author of thread is really asking for changing font colors.
        Loading editor
    • If you mean font face then then it’s just

      <font face="(fontname)">text</font>
      

      How will using spanstyle be better though? All the wiki shows I’ve been in used fontface, and I use it too, things seem fine to me.

        Loading editor
    • While deprecated tags are still used there and there, they are recommended to be not used. Their support in future could possibly not remain, and hence their use is not considered as preferable practice. :)
      And better alternative for font face would be font-family:
      <span style="font-family: fontname;">Text.</span>
        Loading editor
    • Aiihuan wrote:

      better alternative for font face would be font-family:
      <span style="font-family: fontname;">Text.</span>

      JFTR, there's a shorthand if you want to change several aspects of fonts, I sometimes use <span style="font:smaller monospace">…</span> or similar if <small><code>…</code></small> is no option. In this example monospace is a font-family and smaller is a font-size.

      There are only a few font-family (monospace, serif, sans, …), it's perfectly fine to add one or more specific font-face (e.g., Courier, Helvetica, Helv, Consolas, Lucida Console, …) if you know exactly what you're doing for at least one platform (Linux, Mac, Windows, …). The font-family is the last resort if none of the font-face are available, it's guaranteed to exist, but might be not what you want for, say, the latest and greatest emoji as of 2017 on a Windows 7 as shipped 2009.

        Loading editor
    • The above options should work. If you are however aiming for a default font, then there are three CSS options.

      Head to MediaWiki:Common.css on your wiki and pick one of the following codes:

      1. To apply a common font.

      * article {
        font-family: "<font name>";
      }

      For some fonts, you will have to enter "serif", "sans-serif" or something similar behind a comma behind the font name. The semicolon has to be at the end of it all.

      2. To import from Google Fonts.

      Head to Google Fonts and select one or more fonts (by clicking the "+"). Then open a tab at the bottom of the window and click "@import". There, it'll show an "@import" code to copy-paste to the top of Common.css. You should not copy the "<style>" tags unlike what Google Fonts tells you to do; just copy the @import. A tad below, it says how to target the font.

      After importing the font, use the code listed at the first method.

      3. Directly uploading the font.

      In order to do this, you must request Staff through Special:Contact/general to enable ".tff", ".otf", ".eot", ".woff" and ".woff2" uploads for your wiki.

      After that, upload the font. Then, inspect the link listed on the file page and copy the url listed at the newly formed tab at the right.

      Go to Common.css and write the following:

      @font-face {
         font-family: '<a name you will give the font. Refer to the font using said name.>';
         src: url('<copied url>');
      }

      Then follow Step 1 and insert the name you gave the font. It is also possible to link a non-FANDOM website in the @font-face rule (bypassing the need for request, download and upload), but I recommend against this.

      If another wiki already has the font in question uploaded, inspect the link on the file page on said wiki and use that URL instead (e.g. using the Undertale Wiki's @font-face rule for the Determination font. Make sure you have permission to use the rule/font).

      I hope it turns out well.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message