How to I change font family?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Elmer
    Senior Member
    • Jul 2002
    • 160

    [vB5] How to I change font family?

    Hi,

    I'm setting up a new forum and I need to change the default font. We want to use a google font called Nunito. Where should I add the google code so that I can change body_font style var for the new one?

    I'am using vBulletin 5.4.3
  • napy8gen
    Senior Member
    • Jul 2001
    • 525
    • 6.X

    #2
    Hi Elmer,
    1. Go to Admincp> Styles>style manager> style name> edit templates> head_include>
    paste inside:
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    2. Then goto Admincp> Styles> Style manager> style name> style variable editor> search for "font"
    The old version 5.4.3 if not mistaken, should be "body_font", you can put the font family property: 'Nunito', sans-serif

    Some fonts not using the body font, you can try click each font stylevars to see and put in the, 'Nunito', sans-serif

    For vb5.5.0 there is new font variable called "global_text_font"
    Get Our vbulletin 6 themes

    Comment

    • Elmer
      Senior Member
      • Jul 2002
      • 160

      #3
      Thank you for the help, I was doing something similar, but the way you explained seems better to me. Thanks.

      Comment

      • Dave Kotecki
        New Member
        • Mar 2019
        • 1
        • 5.3.x

        #4
        Originally posted by napy8gen
        Hi Elmer,
        1. Go to Admincp> Styles>style manager> style name> edit templates> head_include>
        paste inside:


        2. Then goto Admincp> Styles> Style manager> style name> style variable editor> search for "font"
        The old version 5.4.3 if not mistaken, should be "body_font", you can put the font family property: 'Nunito', sans-serif

        Some fonts not using the body font, you can try click each font stylevars to see and put in the, 'Nunito', sans-serif

        For vb5.5.0 there is new font variable called "global_text_font"
        Thanks for this.
        It was driving me nuts

        Comment

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

          #5
          vBulletin 5 actually ships with the WOFF and WOFF2 files for the NUNITO font in its fonts directory. It also includes CSS templates to include this font as a Font-Family without downloading it from Google on every page load.

          In your custom style, you can edit the css_fonts.css template and add the following code to make sure it is available:

          Code:
          <vb:comment>/* Nunito */</vb:comment>
          {vb:template css_font_nunito.css,
              use_regular=1,
              use_bold=1}
          The two font families from above would be nunitoregular and nunitobold.

          Other variations are listed in the css_font_nunito.css template.

          The link to Google Fonts in your head_include and becomes superfluous after this. It just wastes bandwidth and increases latency.
          Translations provided by Google.

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

          Comment

          • napy8gen
            Senior Member
            • Jul 2001
            • 525
            • 6.X

            #6
            It is okay you can use the same way to use other hundreds of fonts from Google that vBulletin not provide.
            Get Our vbulletin 6 themes

            Comment

            • Ink Blot
              New Member
              • Jun 2019
              • 4
              • 5.3.x

              #7
              Originally posted by Wayne Luke
              vBulletin 5 actually ships with the WOFF and WOFF2 files for the NUNITO font in its fonts directory. It also includes CSS templates to include this font as a Font-Family without downloading it from Google on every page load.

              In your custom style, you can edit the css_fonts.css template and add the following code to make sure it is available:

              Code:
              <vb:comment>/* Nunito */</vb:comment>
              {vb:template css_font_nunito.css,
              use_regular=1,
              use_bold=1}
              The two font families from above would be nunitoregular and nunitobold.

              Other variations are listed in the css_font_nunito.css template.

              The link to Google Fonts in your head_include and becomes superfluous after this. It just wastes bandwidth and increases latency.
              I would like to switch to Red Hat, a Google font. Did VB5 (cloud) ship with Red Hat as well? Where can I look to see all the fonts it shipped with? Thanks.

              Comment

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

                #8
                We do not ship with Red Hat. If it is a Google Font, you can use it with your vBulletin Cloud by placing the @import command Google provide's in your CSS template under Styles -> Edit CSS in Site Builder.
                1. Just go to https://fonts.google.com/
                2. Add font by clicking +
                3. Go to selected font > Embed > @IMPORT > copy url.
                4. Paste that code into the css_additional.css found in Style -> Edit CSS within Site Builder.
                5. Save the CSS.
                Then you can use the Font Family in both CSS and style variables in the AdminCP.
                Translations provided by Google.

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

                Comment

                • Ink Blot
                  New Member
                  • Jun 2019
                  • 4
                  • 5.3.x

                  #9
                  Originally posted by Wayne Luke
                  We do not ship with Red Hat. If it is a Google Font, you can use it with your vBulletin Cloud by placing the @import command Google provide's in your CSS template under Styles -> Edit CSS in Site Builder.
                  1. Just go to https://fonts.google.com/
                  2. Add font by clicking +
                  3. Go to selected font > Embed > @IMPORT > copy url.
                  4. Paste that code into the css_additional.css found in Style -> Edit CSS within Site Builder.
                  5. Save the CSS.
                  Then you can use the Font Family in both CSS and style variables in the AdminCP.
                  Thanks Luke. The instructions I clear and I understand them. It's just not working. The font is not loading. It defaults to verdana or something.

                  Comment

                  • Mark.B
                    vBulletin Support
                    • Feb 2004
                    • 24286
                    • 6.0.X

                    #10
                    This feature definitely works. Please paste in the exact code you have added.
                    MARK.B
                    vBulletin Support
                    ------------
                    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                    Comment

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

                      #11
                      Originally posted by Ink Blot
                      The font is not loading. It defaults to verdana or something.
                      Would be nice if the software used a newer font such as Verdana by default.

                      Anyway, what is the font you're trying to use (please link to the Google Font Page) and what are you entering into the font based (their names end with _font) style variables?

                      Translations provided by Google.

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

                      Comment

                      • Ink Blot
                        New Member
                        • Jun 2019
                        • 4
                        • 5.3.x

                        #12
                        Wayne Luke

                        The font is Open Sans (https://fonts.google.com/specimen/Op...mily=Open+Sans)

                        This is what has been entered within the css editor:
                        <style>
                        @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
                        </style>
                        This is what has been typed w/in the Style Variable Editor under global font family:
                        'Open Sans', sans-serif;

                        Have I missed something? Thanks!

                        Comment

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

                          #13
                          Lose the <style> and </style>. These HTML tags do not belong in a CSS template. Using them will break your CSS and prevent it from being parsed by the browser.

                          All you need is the @import line as stated above.
                          Translations provided by Google.

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

                          Comment

                          • Ink Blot
                            New Member
                            • Jun 2019
                            • 4
                            • 5.3.x

                            #14
                            Thanks.

                            Comment

                            Related Topics

                            Collapse

                            Working...