Announcement

Collapse
No announcement yet.

How to I change font family?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [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

  • #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 New Flat Theme Pro Pack or Grab all 34 vb5.5.1 skins @sultantheme.com -vb3 responsive style or vb4 responsive style and vbcloud custom style

    Comment


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

      Comment


      • #4
        Originally posted by napy8gen View Post
        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


        • #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 customization and demonstration site.
          vBulletin 5 Documentation - Updated every Friday. Report issues here.
          vBulletin 5 API - Full / Mobile
          I am not currently available for vB Messenger Chats.

          Comment


          • #6
            It is okay you can use the same way to use other hundreds of fonts from Google that vBulletin not provide.
            Get Our New Flat Theme Pro Pack or Grab all 34 vb5.5.1 skins @sultantheme.com -vb3 responsive style or vb4 responsive style and vbcloud custom style

            Comment


            • #7
              Originally posted by Wayne Luke View Post
              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


              • #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 customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #9
                  Originally posted by Wayne Luke View Post
                  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


                  • #10
                    This feature definitely works. Please paste in the exact code you have added.
                    MARK.B | vBULLETIN SUPPORT

                    TalkNewsUK - My vBulletin 5.5.2 Demo
                    AdminAmmo - My Cloud Demo

                    Comment


                    • #11
                      Originally posted by Ink Blot View Post
                      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 customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment


                      • #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


                        • #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 customization and demonstration site.
                          vBulletin 5 Documentation - Updated every Friday. Report issues here.
                          vBulletin 5 API - Full / Mobile
                          I am not currently available for vB Messenger Chats.

                          Comment


                          • #14
                            Thanks.

                            Comment

                            Related Topics

                            Collapse

                            Working...
                            X