FANDOM


  • How do I apply custom font on my fandom - https://otome-games-is-tough-for-mobs.fandom.com/wiki/The_World_of_Otome_Games_is_Tough_for_Mobs_Wiki like other fandom does? For example, Somali to Mori no Kamisama - https://somaliandtheforestspirit.fandom.com/wiki/Template:Heading?action=edit have Permanent Marker font and Steven Universe https://steven-universe.fandom.com/wiki/Template:Home?action=edit font have Anja Eliane

    So, is there like scripts/codes that I have to add to CSS or something for this to work? Cuz I want to use this font - https://www.dafont.com/gunplay.font , gunplay rg.ttf

      Loading editor
    • Have you imported the fonts yet? If not, have you read Help:How_to_import_Google_Fonts?


      Edit:

      1. Ask staff to allow TTF files on your wiki.
      2. Put the appropriate CSS in your site's CSS. Here is an example of how to change the default font for all page content.
        Loading editor
    • damn I have to ask staff for this too? ok after that where do I put the code in css? Wikia or Common?

        Loading editor
    • Doesn't usually matter. Since there is only one desktop skin, both pages effectively do the same thing. The only real difference is the "order". Common is considered "first" so if CSS on that page conflicts with CSS on Wikia, Wikia "wins".

        Loading editor
    • Wikia/Fandom wins and takes over the world

        Loading editor
    • oh yea how I upload the font file? the fandom staff already allow my fandom to upload ttf files

        Loading editor
    • And if I wanna use @import instead of @font-face?

      Edit: Tried to follow this - https://heliosanctus.fandom.com/wiki/Installing_Fonts one too but it seems like it doesn't work either

        Loading editor
      1. You upload the file like you would an image; Special:Upload.
      2. I believe you could use @import but then you will have to know the default font name. Google Fonts provides a CSS example which allows users to see what the font name is. After a quick look, I did not see something similar for the site you got this font from. If you know what the name is, then go ahead and use @import. Otherwise, @font-face will allow you to set a name to use.
        Loading editor
    • I did test on Welcome To Japan, Ms. Elf! Wiki using @import but it doesn't seems like to be working tho, even I purge the action, I might missing something even though I followed the steps. Hmm idk how this fandom - https://somaliandtheforestspirit.fandom.com/wiki/MediaWiki:Wikia.css only use @import and it works, I'm not the boss in Somali alright, guess I have to use @font-face for another test.

      Or you could do something about @import? Since @import is much simple than @font-face 

        Loading editor
    • Andrewds1021 wrote:
       
      1. Put the appropriate CSS in your site's CSS. Here is an example of how to change the default font for all page content.

      About this - 

      #WikiaRail,
      #mw-content-text {
          font-family: "Whitney Book","Helvetica Neue",Helvetica,Arial,sans-serif;
      }
      

      What do I have to do with this? I feel like I need to change the scripts... Anyway, is this right/correct scripts I put? I mean like the font codes I put.. I wanna use this font - https://fonts.google.com/specimen/Righteous as a test using @font-face first before putting it on CSS.

      @font-face {
          font-family: "Righteous";
          src: url("i'll put this later");
      }
       
      #WikiaRail,
      #mw-content-text {
          font-family: 'Righteous', cursive;
      }
      

      And for @import, is this correct? - 

      @import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

        Loading editor
      1. As I tried to explain in my previous reply. You can use @import when you know what the font-family name is. Google Fonts tells you what it will be so you can get away with using @import for Google Fonts. Other sites may not do the same; in which case you must use @font-face.
      2. Yes, that CSS should work.
      3. Yes, I think that @import is correct. Remember, you just need one; either @import or @font-face.
        Loading editor
    • Afzal108
      Afzal108 removed this reply because:
      h
      08:45, January 29, 2020
      This reply has been removed
    • Hmmm it seems like @font-face affecting all texts in fandom which is I don't want that, feels odd

      Meanwhile @import is finally working :)

      So now, how do I wanna use @font-face without affecting all texts but only to specific texts I wanna put?

      Alright Andrew, need ya help more checking the fandom - https://nihon-he-youkoso-elf-san.fandom.com/wiki/Welcome_To_Japan,_Ms._Elf!_Wiki

      can ya tell if there's anything text-changes on part where Page, Articles, Files, Edits, Editor(s) counter on your side? Is it working?

        Loading editor
    • I am sorry, but I don't quite understand what you are asking for in the latter part of your post.

      As for where the text is applied, if you don't want it everywhere, the issue is not @font-face (which it looks like you aren't using anyways), it is the CSS just below it. You can change the selectors to whatever you want.

        Loading editor
    • Afzal108
      Afzal108 removed this reply because:
      Just remove
      03:45, January 30, 2020
      This reply has been removed
    • Andrewds1021 wrote: I am sorry, but I don't quite understand what you are asking for in the latter part of your post.

      Which one that ya dont get it?

      Selec...ters? I didnt quite catch dat 😅
      Anyway, I checked the fandoms that I change the default font on another PC/lappy and... it doesn't look like its working. Am I missing something on CSS scripts? Take a look at these pics I took -

      IMG 20200130 111746
      IMG 20200130 111807


      I hope ya can tell the one with "custom" and the one with default font

        Loading editor
    • I see. One of the reasons is that you haven't specified where to apply the font. However, I accounted for that when I tested it and the font still didn't work. I noticed that you removed "&display=swap" from the URL. Would you mind putting that back in? I would like to see if that might be the issue.

      Since there seems to be some confusion, I am going to summarize the custom font process.

      1. Import the font
        • Do I use @import or @font-face?
          If you don't know what the "font-family" name is or if you want to make changes such as the default "font-weight", use @font-face. Otherwise, you can choose to use @import.
        • Do I need to upload a local copy to my wiki?
          If the source website provides a direct URL to the font file, you can use that URL in your CSS import. Otherwise, you need to upload a local copy and use the URL of that copy.
      2. Apply the font

      The following is how you change your wiki's default font. Use of this snippet of CSS is independent of how the font was imported.

      #WikiaRail,
      #mw-content-text {
          font-family: 'Righteous', cursive;
      }

      If you want to apply the font in certain scenarios rather than by default, the CSS you use would depend on the scenario. From your last reply, it sounds like this is what you want. In that case, please provide a description of where you want the font to be applied.

      Afzal108 wrote:[...]

      Alright Andrew, need ya help more checking the fandom - https://nihon-he-youkoso-elf-san.fandom.com/wiki/Welcome_To_Japan,_Ms._Elf!_Wiki

      can ya tell if there's anything text-changes on part where Page, Articles, Files, Edits, Editor(s) counter on your side? Is it

      That is the part I didn't understand.

        Loading editor
    • Andrewds1021 wrote:
      I see. One of the reasons is that you haven't specified where to apply the font. However, I accounted for that when I tested it and the font still didn't work. I noticed that you removed "&display=swap" from the URL. Would you mind putting that back in? I would like to see if that might be the issue.

      Alright, I already put back that thing to CSS


      Andrewds1021 wrote:

      1. Apply the font

      The following is how you change your wiki's default font. Use of this snippet of CSS is independent of how the font was imported.

      #WikiaRail,
      #mw-content-text {
          font-family: 'Righteous', cursive;
      }

      If you want to apply the font in certain scenarios rather than by default, the CSS you use would depend on the scenario. From your last reply, it sounds like this is what you want. In that case, please provide a description of where you want the font to be applied.

      Right, first let's go to Welcome To Japan, Ms. Elf! Wiki fandom

      I wanna use the custom font on (just for test to see if it working on other user's side instead of me) - 

      On this template - https://nihon-he-youkoso-elf-san.fandom.com/wiki/Template:MainPage/Left I wanna Welcome to the Welcome To Japan, Ms. Elf! Wiki!, Story, 'Characters, Featured Article, & Contribute to this Wiki! & also on this template - https://nihon-he-youkoso-elf-san.fandom.com/wiki/Template:MainPage/Right I wanna Author's Twitter, Latest Light Novel, Latest Manga, Poll to be changed to custom font dat I put in Wikia.css




      For this fandom (Bottom-Tier Character Tomozaki Wikia) - 

      On this template, I'm pretty sure I already applied the code to it tho, is this - https://jaku-chara-tomozaki-kun.fandom.com/wiki/Template:Heading



      Andrewds1021 wrote:



      Afzal108 wrote:[...]

      Alright Andrew, need ya help more checking the fandom - https://nihon-he-youkoso-elf-san.fandom.com/wiki/Welcome_To_Japan,_Ms._Elf!_Wiki

      can ya tell if there's anything text-changes on part where Page, Articles, Files, Edits, Editor(s) counter on your side? Is it

      That is the part I didn't understand.

      Ahhh dat one, I was asking you to check the fandom to see if there's anything changes on the font I applied, dats all :3

        Loading editor
    • It doesn't seem to be working on either wiki right now. It is possible that the CSS behavior has changed and Wikia.css versus Common.css matters again. Try moving the imports to Common.css. For the second wiki, yes, you already have applied the font. Therefore, as soon as we get the import working, it should work on the template. For the first wiki, it seems like each of those titles are styled slightly different and not all of them have a class (and the class that some do is shared with some titles you didn't list). As such, you will probably need to change the font using inline CSS like you did for the second wiki. Perhaps you might want to consider making a template for the titles on the first wiki like you did for the second wiki.

        Loading editor
    • Andrewds1021 wrote:
      It doesn't seem to be working on either wiki right now. It is possible that the CSS behavior has changed and Wikia.css versus Common.css matters again. Try moving the imports to Common.css.

      Alright, already moved to codes to Common.css


      Andrewds1021 wrote:
      For the first wiki, it seems like each of those titles are styled slightly different and not all of them have a class (and the class that some do is shared with some titles you didn't list). As such, you will probably need to change the font using inline CSS like you did for the second wiki. Perhaps you might want to consider making a template for the titles on the first wiki like you did for the second wiki.

      Hmm I feel like I don't wanna do Header template tho.... Tell me how to do this class on the titles I want in CSS please.

        Loading editor
    • Okay. It looks like it is working now. That is really annoying that Wikia changed the behavior again. Maybe I'll contact them about it.

      As for the class, you start by adding it to the element in the page. For example, this is the current state of your "Author's Twitter" header.

      <div class="segment-title" style="margin-bottom: 0; text-align:center; font-size:165%; margin-bottom:2px; color:#5EB02E; text-shadow:0 1px 15px #aad9f7; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,251,195,0));">'''Author's Twitter{{Icon}}'''‎</div>
      

      Do you see the class="segment-title" part? That assigns the class "segment-title" to the div element enclosing the title. You can assign multiple classes to a single element by separating them with spaces. Let's say the new class we want to add is "styled-header". Then we would want this:

      <div class="segment-title styled-header" style="margin-bottom: 0; text-align:center; font-size:165%; margin-bottom:2px; color:#5EB02E; text-shadow:0 1px 15px #aad9f7; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,251,195,0));">'''Author's Twitter{{Icon}}'''‎</div>
      

      The second part is adding the proper CSS to your site's CSS. It should look something like this.

      .styled-header {
          font-family: Righteous, cursive;
      }
        Loading editor
    • Andrewds1021 wrote:
      Okay. It looks like it is working now. That is really annoying that Wikia changed the behavior again. Maybe I'll contact them about it.

      Which fandom is working? the elf or bottom-tier? Can ya send me screenshot(s) how is it look like on ur side? Ik you said it's working but I really wanna see on ur side.


      Andrewds1021 wrote: As for the class, you start by adding it to the element in the page. For example, this is the current state of your "Author's Twitter" header.

      <div class="segment-title" style="margin-bottom: 0; text-align:center; font-size:165%; margin-bottom:2px; color:#5EB02E; text-shadow:0 1px 15px #aad9f7; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,251,195,0));">'''Author's Twitter{{Icon}}'''‎</div>
      

      Do you see the class="segment-title" part? That assigns the class "segment-title" to the div element enclosing the title. You can assign multiple classes to a single element by separating them with spaces. Let's say the new class we want to add is "styled-header". Then we would want this:

      <div class="segment-title styled-header" style="margin-bottom: 0; text-align:center; font-size:165%; margin-bottom:2px; color:#5EB02E; text-shadow:0 1px 15px #aad9f7; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,251,195,0));">'''Author's Twitter{{Icon}}'''‎</div>
      

      The second part is adding the proper CSS to your site's CSS. It should look something like this.

      .styled-header {
          font-family: Righteous, cursive;
      }

      Alright, I'll start test it now, brb

      But wait, which CSS are ya talking about? common or wikia? Common.css right?

        Loading editor
    • When I said "it" was working, I meant the import on the Ms. Elf wiki. Without the additional CSS, you won't be able to see it on the wiki.

      Common.css versus Wikia.css should only matter with regards to imports. However, to be safe, sure, use Common.css.

        Loading editor
    • Alright, I use class border-one, border-two, border-three, border-four on the home segment in template https://nihon-he-youkoso-elf-san.fandom.com/wiki/Template:MainPage/Right

      so the scripts in CSS would be - 

      /* Custom Font on some part*/
      .border-one {
          font-family: Righteous, cursive;
      }
       
      .border-two {
          font-family: Righteous, cursive;
      }
       
      .border-three {
          font-family: Righteous, cursive;
      }
       
      .border-four {
          font-family: Righteous, cursive;
      }

      I hope that's correct...

        Loading editor
    • Yes, it is correct. However, depending on what you intend to do, it may not be the most efficient representation.

      For starters, since all of those CSS rules have identical property assignments, you can combined them like this.

      .border-one,
      .border-two,
      .border-three,
      .border-four {
          font-family: Righteous, cursive;
      }

      Do you think you might use differing property assignments at some point? If not, then you don't even need to use different classes for each section. You are allowed to use the same class on multiple elements.

        Loading editor
    • Oh I can do that too? nice, so there's no need to make it long huh? and it doesn't have to be different classes on each huh? alright, okay Andrew :)

        Loading editor
    • Correct. As long as you plan on styling them all the same way, you can use just one class for all of them.

        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
Community content is available under CC-BY-SA unless otherwise noted.