the included fonts folder - how to use them?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • StephenKay
    Senior Member
    • Apr 2003
    • 437

    the included fonts folder - how to use them?

    I notice that there is a folder of webfonts at the root of the vb installation (5.3.3). How do you use those? For example, say I wanted to try Ubuntu for the body text? I couldn't find any .css files associated with them...

    I also notice that the notes for the 5.3.4 release which I haven't updated to yet mentions deleting this folder. Why is it there? Must be for some reason...
  • In Omnibus
    Senior Member
    • Apr 2010
    • 2310

    #2
    Some (or all) of the included fonts have been converted to woff type fonts as of 5.3.4.

    My recommendation is to use Google Fonts if you wish to use custom fonts. Wayne Luke wrote a good explanation of how to use them.

    Comment

    • StephenKay
      Senior Member
      • Apr 2003
      • 437

      #3
      I have experimented with Adobe's TypeKit, and may try google fonts as well. I have also downloaded webfont packages from FontSquirrel and it works really well - I don't know if it's my imagination, but having the font packages on the server seems to load the fonts faster, you don't get so much of a flash of the original font before it is replaced.

      So, since I see many font packages already in there in the fonts directory, I just wondered how to use them...

      So, I'd still like to know if there's a way to use Ubuntu (for example) which is in the fonts folder, if anyone knows.

      Comment

      • In Omnibus
        Senior Member
        • Apr 2010
        • 2310

        #4
        Originally posted by StephenKay
        I have experimented with Adobe's TypeKit, and may try google fonts as well. I have also downloaded webfont packages from FontSquirrel and it works really well - I don't know if it's my imagination, but having the font packages on the server seems to load the fonts faster, you don't get so much of a flash of the original font before it is replaced.

        So, since I see many font packages already in there in the fonts directory, I just wondered how to use them...

        So, I'd still like to know if there's a way to use Ubuntu (for example) which is in the fonts folder, if anyone knows.
        It's already included in the CSS, as are all the included fonts. css_font_ubuntu.css

        So, all you have to do is to change whichever stylevar(s) control your desired font family from the current font to 'Ubuntu' (single quotes required.)

        Comment

        • StephenKay
          Senior Member
          • Apr 2003
          • 437

          #5
          Thank you, but I tried that. It doesn't work. Where is that css_font_ubuntu.css file exactly? I'm searching the vb folder on Dreamweaver and not coming up with it... I'm new with the Adobe CC version of it so maybe the search isn't working... Nope, did a general Mac Finder search and there is no file like that. I started with the 5.3.3 version, perhaps these files were removed...?

          Comment

          • In Omnibus
            Senior Member
            • Apr 2010
            • 2310

            #6
            In the AdminCP - Styles - Style Manager you need to select Edit Templates from the drop-down menu. Scroll down to CSS Templates and expand the menu. Continue to scroll down until you see the css_font_ menus. Those are the installed fonts. If you open the CSS for each it will show you the styles installed for each and their names.

            I did check and these are in 5.3.2, 5.3.3 and 5.3.4. I also tested the Ubuntu font in the Stylevars body font before posting the above. If the font is not changing for you then it's possible you are looking in the wrong location or editing the wrong stylevar. I have attached a screenshot of the stylevar that should be edited to test a new font in the body font.

            Click image for larger version

Name:	edit.png
Views:	89
Size:	68.8 KB
ID:	4381872

            Comment

            • StephenKay
              Senior Member
              • Apr 2003
              • 437

              #7
              I have edited the correct stylevar and put in 'Ubuntu'. It's still not working. I found the templates you speak of.

              If I look at the source code of one of my pages, I do not see any of those font css files included. The only included css file is 'css_fonts.css'

              On my 5.3.3, this 'css_fonts.css' template is empty. Is it empty for you? My guess is that this is the "global" fonts include and you need to include these other font-specific css files inside it for whichever fonts you want to use. I don't know the syntax yet....

              Comment

              • StephenKay
                Senior Member
                • Apr 2003
                • 437

                #8
                My guess was correct. You must have entries in the 'css_fonts.css' template for any of those fonts to work. For example, from the "Orange Purple" style, which uses ubuntu:

                Code:
                <vb:comment>/* Fonts used by the Orange Purple style */</vb:comment>
                
                <vb:comment>/* Ubuntu */</vb:comment>
                {vb:template css_font_ubuntu.css,
                    use_regular=1,
                    use_bold=1}
                EDIT: which makes sense, because you wouldn't want to include all of those fonts unless you were actually using them.

                Secondly, in the stylevars, it's not 'Ubuntu", it's 'ubunturegular' or 'ubuntubold'.

                It was almost impossible to figure this out, because none of the 'css_fonts.css' files for the included styles can be viewed. For example, with Orange Purple style, the css_fonts.css template is displayed orange, for being inherited from a parent style. So you cannot look at it. This is the same for any of the included styles. All of the modified css_fonts.css files are orange and cannot be viewed. But where are they inherited from??

                I finally had to use phpMyAdmin to go in and look at the raw data in the database, in the templates table, to find an example of one that had a modification.
                Last edited by StephenKay; Fri 24 Nov '17, 10:21am.

                Comment

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

                  #9
                  If you look at each font.css template, it will tell you what the different weights are and what font-family to use in order to get it to work. You have to pass the "use*" values in via css_fonts.css. If they aren't set to 1 then they won't be included. We're looking at ways to make this easier including being able to link to the individual fonts for Cloud users.
                  Translations provided by Google.

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

                  Comment

                  widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                  Working...