Using Google Webfonts in vBulletin 5.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73976

    #16
    Do you have the default font overridden using the module_* stylevars?
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment

    • claystation
      Member
      • Jan 2007
      • 64
      • 5.0.X

      #17
      No in my additional.css and just the navigation bar.
      FIND ME ON
      AndyClift.com
      Etsy
      Facebook
      Google Plus
      Linkedin
      Twitter
      YouTube

      Comment

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73976

        #18
        updated for 5.1.4
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment

        • yv3013
          Senior Member
          • Jan 2013
          • 102
          • 5.0.0

          #19
          Originally posted by Wayne Luke
          You can use embeddable fonts in your vBulletin 5 style as long as the browser in use supports it. Browsers that support Embeddable Fonts include IE 9, IE10, Chrome, Safari, and Firefox. Older versions of IE can support Embedded Fonts using a proprietary font format from Microsoft.

          To use these fonts follow the instructions for your version.

          All Versions of vBulletin 5
          Go to Google's Webfont site and find the Fonts you want to use. A popular one is Open Sans. If you want to use multiple fonts, click "Add to Collection". If you just want to use one font, click "Quick Use". We're going to use Quick Use.

          Google will provide the different varieties of the check the varieties you want. Google also shows a meter on the top right that estimates the load of your font package. Embeddable Fonts need to be downloaded by the end user when they visit, though they can be cached as well. In order to provide some font variety, I have selected Normal 400, Normal 400 Italic, Bold 700, and Bold 700 Italic. Increases the load time a little but provides a lot of flexibility.

          After selecting your varieties, scroll down on the page and you'll see the code you need to embed the fonts on your site. You'll need to copy this code for inclusion in your forums. For our Open Sans example the code looks like this:
          Code:
          @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
          Using Google Webfonts in vBulletin 5.1.4 and later.
          Now that you have your code, you need to log into the AdminCP of your vBulletin 5.1.4 installation. Once logged in go to Styles & Templates -> Style Manager. Click on the «» button on the far right to expand the template list. Next double click on CSS Templates to open that group. Now double-click on css_font.css to edit it. Place your Google Web Font code within this. Save this template.

          Go into the Style Variable Editor for your style and find the stylevar body_font. At the beginning of the font family line add:
          Code:
          "Open Sans",
          The quotes are required. Save this variable and all the fonts on your site will update automatically.

          .
          I tried to follow this but I don't know where I should put the first code, you say to place google web font code within [I]css_font.css[/I] but exactly where? between which text?

          the last part, find stylevar body_font. I can't find it.

          Could someone do a visual tutorial on this? actual pictures step by step would be much more helpful tutorials then just text.

          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73976

            #20
            css_font.css is a template and by default it would be empty. You can place your code anywhere within that template. Ideally you would only include the fonts you're using so it would be the only line.

            You should not be editing files directly.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment

            • yv3013
              Senior Member
              • Jan 2013
              • 102
              • 5.0.0

              #21
              This is what I mean about pictorial tutorials, it's so much easier to learn from actual pictures.

              I think I ended up doing it but doesn't appear to change anything.
              My main concern was the text size, why is the text on all themes aside from vb default theme so small?
              how do I make the blue green theme to have bigger text?

              Comment

              • Hellas
                Member
                • Aug 2018
                • 40
                • 5.3.x

                #22
                Originally posted by yv3013
                This is what I mean about pictorial tutorials, it's so much easier to learn from actual pictures.

                I think I ended up doing it but doesn't appear to change anything.
                My main concern was the text size, why is the text on all themes aside from vb default theme so small?
                how do I make the blue green theme to have bigger text?
                Yes Wayne - You sent me here too and closed my more specific thread on font sizes. I was more interested as I stated in simply changing the font sizes on the forum titles. Don't really need Google fonts or anything like that.

                Comment

                • Wayne Luke
                  vBulletin Technical Support Lead
                  • Aug 2000
                  • 73976

                  #23
                  You had two threads on Changing Fonts. In one I posted example CSS on how to change the font sizes you want to change. You'll have to look at that CSS code, edit it to fit your needs and apply it to your site. The second was closed.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API

                  Comment

                  • Emad ELsayed
                    Senior Member
                    • Jan 2013
                    • 151
                    • 4.2.x

                    #24
                    I do not find a stylevar named body_font.
                    VB.5.4.5

                    Comment

                    • In Omnibus
                      Senior Member
                      • Apr 2010
                      • 2310

                      #25
                      Originally posted by Emad ELsayed
                      I do not find a stylevar named body_font.
                      VB.5.4.5
                      It's been changed to global_text_font

                      Comment

                      • Emad ELsayed
                        Senior Member
                        • Jan 2013
                        • 151
                        • 4.2.x

                        #26
                        Originally posted by In Omnibus

                        It's been changed to global_text_font
                        Unfortunately, there is no change
                        Is there another way?

                        Comment

                        • In Omnibus
                          Senior Member
                          • Apr 2010
                          • 2310

                          #27
                          Originally posted by Emad ELsayed

                          Unfortunately, there is no change
                          Is there another way?
                          Which font are you attempting to change? There is another global font for the headers called global_header_font

                          Some of the individual stylevars need to be changed individually. The developers are still working on the global stylevars.

                          Comment


                          • Emad ELsayed
                            Emad ELsayed commented
                            Editing a comment
                            I would like to change font of channels and posts
                            I will wait for the changes in 5.5.0
                            Best Regards
                        • Wayne Luke
                          vBulletin Technical Support Lead
                          • Aug 2000
                          • 73976

                          #28
                          At the time of this post, It would probably be best to wait for vBulletin 5.5.0 to be released for font customization.
                          Translations provided by Google.

                          Wayne Luke
                          The Rabid Badger - a vBulletin Cloud demonstration site.
                          vBulletin 5 API

                          Comment

                          • Emad ELsayed
                            Senior Member
                            • Jan 2013
                            • 151
                            • 4.2.x

                            #29
                            Originally posted by Wayne Luke
                            At the time of this post, It would probably be best to wait for vBulletin 5.5.0 to be released for font customization.
                            When will the final version be issued?
                            Can I upgrade to vBulletin 5.5.0 Alpha 2?
                            Best Regards

                            Comment


                            • Wayne Luke
                              Wayne Luke commented
                              Editing a comment
                              Early January. I expect the Beta to be release in the next 7-10 days and a final release about 5-10 days after that. The gap is due to the fact that we do not do releases on Friday, Saturday, or Sunday.

                            • Emad ELsayed
                              Emad ELsayed commented
                              Editing a comment
                              Thank you dear
                              I will wait for at least a beta release
                              Best Regards

                          Related Topics

                          Collapse

                          Working...