Custom font from acp ?



  • Hi !
    I wanted to change the default font of lavender, but i don't wan to make a fork of the theme or anything else, so i wanted to know if there is a easy way to change the googlefont from the custom css from ACP 🙂 !
    Thank ! (And again, sorry for my english...)


  • Plugin & Theme Dev

    Hi,

    You can override whatever font is currently there with anything you'd like.

    For example, if you'd like to use Google Fonts and wanted to use Roboto (which is used here), you can do so in the ACP and define the font as follows:

    • Go to your ACP in /admin
    • Go to Appearance > Custom HTML & CSS
    • In the CUSTOM CSS, you can put this @import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700) (or whatever you want) here.
    • You will then have to define this font so that it will show up on the site. For example, if you'd like this font to be used in the entire body, you would do something like this;
    body { 
      font-family: "Roboto", Helvetica, "Helvetica Neue", Arial, sans-serif;
    }
    

    This will override the current font in favor of Roboto. Let me know if that works.



  • I re-setup my forum and give you a feedback ! Thank anyway ! 🙂
    @trevor Done ! http://forum.robocraftgame.fr/topic/322/du-nouveau-sur-le-forum this is still oking strange, did you know where i can change the color ? ^^' (i want black >:) and slighty less bold....)



  • Where you specified the font that Trevor gave, add this to it

    color:#000;
    font-weight: lighter;

    Adjust the lighter font weight until you get what you want. Look at what font-weight options you have.



  • @a_5mith Hum, this won't work, but i think i'm doing it badly, if put it like that :

    @import url(//fonts.googleapis.com/css?family=Open+Sans:300);
    body { 
     font-family: 'Open+Sans', sans-serif;
     Color:#000;
     Font-weight: lighter;
    }
    

    And i'm still getting grey letter o: and i tried :

    @import url(//fonts.googleapis.com/css?family=Open+Sans:300);
    body { 
      font-family: 'Open+Sans', sans-serif;
      Color:#000;
    }
    

    I'm still getting "light bold" like here ^^'
    Ewh, sorry for boring you, thank ! :')



  • Sorry, on an iPad, take the capitalisation out. If you use Firefox, get firebug and press f12 to bring up the developer tools, then inspect your text element to see if it's there.(any browser should have f12 Dev tools)



  • AHah, riht, sorry i didn't read really, i just copy-pasted it ^^' but after the change, nothing more -try to restart-



  • I'll jump on the computer and take a look for you. Got things to do on there anyway.



  • @a_5mith Thank dude ! 😄



  • Add this to your customise CSS in the ACP

    .topic .topic-text {
        color: #000;
        font-weight: lighter;
        word-wrap: break-word;
    }
    

    You can take it out of the other bit.



  • Ah, this worked ! \o/ thank !
    Final code to put (for someone who want to try)

    @import url(//fonts.googleapis.com/css?family=Open+Sans); //Change "Open+Sans" to any font name google provide
    body { 
      font-family: 'Open+Sans', sans-serif; //Change "Open+Sans" too, plus the style, coresponding to the font.
    }
    .topic .topic-text {
        color: #000; //The color !
        font-weight: lighter; //If ou want it moar bolder or light (like here)
        word-wrap: break-word; //It will break the word with a - and continue that word on the next line, when they are too large.
    }
    

    Thank to @trevor and @a_5mith !



  • @Technowix said:

    Ah, this worked ! \o/ thank !
    Final code to put (for someone who want to try)

    @import url(//fonts.googleapis.com/css?family=Open+Sans); //Change "Open+Sans" to any font name google provide
    body { 
      font-family: 'Open+Sans', sans-serif; //Change "Open+Sans" too, plus the style, coresponding to the font.
    }
    .topic .topic-text {
        color: #000; //The color !
        font-weight: lighter; //If ou want it moar bolder or light (like here)
        word-wrap: break-word; //Dunno xD
    }
    

    Thank to @trevor and @a_5mith !

    Open+Sans isn't a font. 😆 Your site is falling back to sans-serif. It should be Open Sans

    word-wrap: break-word is used for if someone types a long word that doesn't fit on one line on a mobile for example, it will break the word with a - and continue that word on the next line. It's in the official CSS, so may as well leave it in. 👍



  • @a_5mith https://www.google.com/fonts#QuickUsePlace:quickUse they say me to put that ! 😞 ! bad google xD anyway this worked :'D... i will do what you say 😉



  • @Technowix said:

    @a_5mith https://www.google.com/fonts#QuickUsePlace:quickUse they say me to put that ! 😞 ! bad google xD anyway this worked :'D... i will do what you say 😉

    Yeah, you'd use Open+Sans when importing the font using the import, but when you define the font family, you don't need the plus. Enjoy. 👍

    Untitled.png


Log in to reply
 

Suggested Topics

| |