Using Google Webfonts in vBulletin 5.

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

    Using Google Webfonts in vBulletin 5.

    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.

    Using Google Webfonts in versions before 5.1.4
    Now that you have your code, you need to log into the AdminCP of your vBulletin 5 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_additional.css to edit it. Place your Google Web Font code as the first line in this template. 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.

    Creating Styles with Fonts.
    If you're a style designer you can also use these methods to include your own fonts with the style. Make sure to include the distributable font files in your style package and use the appropriate CSS to include your fonts in either the css_fonts.css (preferred method) or css_additional.css templates. You can find out more about embedding fonts here: http://www.w3schools.com/css/css3_fonts.asp

    I suggest experimenting and playing with different classes until you get the results you're looking for.
    Last edited by Wayne Luke; Thu 4 Dec '14, 7:39am.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API
  • fwulfers
    Senior Member
    • Jul 2010
    • 147
    • 4.2.x

    #2
    I followed the instructions but it doesn't seem to work quite right. It does change the font in posts but only for less than a second. It just goes back to displaying the default font after that. It doesn't only happen with the webfonts but regular fonts like Verdana as well.

    Edit: the font changes in Announcements and Blog posts, side bar and perhaps other areas. It just doesn't stick in forum posts.
    Last edited by fwulfers; Wed 17 Oct '12, 7:59am.
    SaabWorld

    Comment

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

      #3
      Try sticking !important after your CSS definition.
      Translations provided by Google.

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

      Comment

      • fwulfers
        Senior Member
        • Jul 2010
        • 147
        • 4.2.x

        #4
        I changed it to: body {font-family: "Open Sans";} !important

        But it doesn't make a difference. You can check it out here: http://automobileworld.org/vb5 , make sure to change the theme from the vB5 default to AutomobileWorld.
        SaabWorld

        Comment

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

          #5
          {font-family: "Open Sans" !important;}

          Appears to be inheriting the font from .ui-widget. You should try applying your CSS there.
          Translations provided by Google.

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

          Comment

          • fwulfers
            Senior Member
            • Jul 2010
            • 147
            • 4.2.x

            #6
            Changed but same thing still happening.
            SaabWorld

            Comment

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

              #7
              I'll look at it in Firefox is a bit.
              Translations provided by Google.

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

              Comment

              • anwar513
                Senior Member
                • Sep 2010
                • 277
                • 5.2.x

                #8
                Hi,Wayne Luke
                Such We like the as font 'alkatip tor tom' How can I change change the font throughout the entire site?
                Thanks

                Comment

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

                  #9
                  Originally posted by Wayne Luke
                  Code:
                  body {font-family: "Open Sans";}
                  This will change the font globally throughout the entire site.
                  Change the font name as you need to.
                  Translations provided by Google.

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

                  Comment

                  • anwar513
                    Senior Member
                    • Sep 2010
                    • 277
                    • 5.2.x

                    #10
                    Thank you for your reply
                    Originally posted by Wayne Luke
                    Change the font name as you need to.
                    Code:
                    body {font-family: "alkatip tor tom";}
                    css_additional.css I add the above code does not respond,My computer has this font。
                    Demo: www.anwar.cn/vb5/

                    Comment

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

                      #11
                      I don't see you including that font from Google anywhere.
                      Translations provided by Google.

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

                      Comment

                      • anwar513
                        Senior Member
                        • Sep 2010
                        • 277
                        • 5.2.x

                        #12
                        I do not have the Google font, I mean our language fonts, change the font of the entire site.

                        Comment

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

                          #13
                          This thread is specifically for embedding Google Fonts. For other issues, you need to start your own thread in the appropriate location.
                          Translations provided by Google.

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

                          Comment

                          • anwar513
                            Senior Member
                            • Sep 2010
                            • 277
                            • 5.2.x

                            #14
                            Well, thank you.

                            Comment

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

                              #15
                              I have successfully used google fonts to change the font in my navigation bar. I have been trying to change the font of the Title of the modules. Can't figure it out, any recommendations?
                              FIND ME ON
                              AndyClift.com
                              Etsy
                              Facebook
                              Google Plus
                              Linkedin
                              Twitter
                              YouTube

                              Comment

                              Related Topics

                              Collapse

                              Working...