How to I change font family?

Collapse
X
 
  • Time
  • Show
Clear All
new posts

  • Ink Blot
    replied
    Thanks.

    Leave a comment:


  • Wayne Luke
    replied
    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.

    Leave a comment:


  • Ink Blot
    replied
    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!

    Leave a comment:


  • Wayne Luke
    replied
    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?

    Leave a comment:


  • Mark.B
    replied
    This feature definitely works. Please paste in the exact code you have added.

    Leave a comment:


  • Ink Blot
    replied
    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.

    Leave a comment:


  • Wayne Luke
    replied
    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.

    Leave a comment:


  • Ink Blot
    replied
    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.

    Leave a comment:


  • napy8gen
    replied
    It is okay you can use the same way to use other hundreds of fonts from Google that vBulletin not provide.

    Leave a comment:


  • Wayne Luke
    replied
    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.

    Leave a comment:


  • Dave Kotecki
    replied
    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

    Leave a comment:


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

    Leave a comment:


  • napy8gen
    replied
    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"

    Leave a comment:


  • Elmer
    started a topic [vB5] How to I change font family?

    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

Related Topics

Collapse

Working...