Home Forums Weaver Xtreme Theme adding custom fonts

Topic Resolution: Resolved
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #19827
    Skippy
    Participant

    Hello.  I’m attempting to add a font from Font Squirrel. 

    The font in question is Smokum.

    https://www.fontsquirrel.com/fonts/smokum?q%5Bterm%5D=western&q%5Bsearch_check%5D=Y

    In theory I followed the directions here:

    https://guide.weavertheme.com/add-new-fonts-google-fonts-and-more/

    down in the Font Squirrel section.  However if I did it right it would be working.  Since it’s not working I must have missed something someplace.

    On this page the font should be used for the text.

    http://goodguys2greatmen.com/sandbox/skippy-test-home-page/

    But it’s not.  The font Smokum appears in the visual editor drop down menu that lists the fonts.  But it doesn’t display.

    All  of the webfont generator files (created by Font Squirrel) and the original ttf file have been uploaded to a common directory.

    Where did I go wrong?  Thanks much.

    #32104
    Weaver
    Keymaster

    Loading Font

    Your file has this <link>:

    <link href=’/fonts/smokum/stylesheet.css’ rel=’stylesheet’ type=’text/css’>

    This is almost certainly not correct. This would mean that the root directory of you site would have to have a directory called /fonts. Each time you update WordPress, that directory will be lost.

    The best place to put locally hosted fonts is in a /wp-content/uploads subdirectory: e.g. /wp-content/uploads/fonts. Your link should then be:

    <link href=’//yoursite.com/wp-content/uploads/fonts/smokum/stylesheet.css’ rel=’stylesheet’ type=’text/css’>

    Display in Visual Editor

    The Visual Editor is unable to display actual add-on fonts, but will instead display the “default” rule for a font – e.g., serif, sans-serif, script, or whatever. So you need to be sure to have fall-back fonts listed in the font-family value.

    Allowing the actual font to display in the visual editor may be added to a future  version of Weaver Xtreme.

    #32105
    Skippy
    Participant

    Thanks.  I have relocated the font files.

    Should it be

    <link href=’http://goodguys2greatmen.com/sandbox/wp-content/uploads/fonts/smokum/stylesheet.css’ rel=’stylesheet’ type=’text/css’>

    or

    <link href=’//goodguys2greatmen.com/sandbox/wp-content/uploads/fonts/smokum/stylesheet.css’ rel=’stylesheet’ type=’text/css’>

    For the font-family would

    font-family: ‘smokumregular,arial’;

    be correct?

    #32106
    scrambler
    Moderator

    Don’t know for the first one but I seemed to have read somewhere from @weaver that you should not use the quote on the second one or it could cause trouble with the editor.

    #32107
    Weaver
    Keymaster

    1. Either form will work, but if you decide to switch to https://, the second form of the <link> will always work.

    2. There was a bug when the font-family had a double quote, but if you’re updated to the latest versions of Weaver Xtreme and Weaver Xtreme Plus, the problem is fixed. Just FYI, if the font-family does not include blanks in the name, you don’t need any kind of quotation mark at all. They are just needed so CSS can parse the name with blanks in it properly.

    #32108
    Gillian
    Moderator

    When I installed my fonts, I used a relative address for the <link> address i.e. I started at /wp-content (I guess Skippy would start at /sandbox in this case).  This also avoids possible http vs https issue issues. Is it considered better practice to include the site at the start, or not? There seems to be diverging views when I read up on this.

    #32109
    Weaver
    Keymaster

    When you put the full URL including the base site URL, then you don’t have to know what your are doing. I suspect that just /wp-content/etc… would work, but that would require testing for sure. Normally the addresses in the header would start in the root, but depending on how the site is really installed (is it in a subdirectory for example?), I would just provide the complete path.

    #32110
    Skippy
    Participant

    I’m back.  Got distracted for a bit there.

    Something is still not right here.

    Here’s what I got.

    Added the font to Weaver as such:

    <link
    href=’//goodguys2greatmen.com/sandbox/wp-content/uploads/fonts/smokum/stylesheet.css’
    rel=’stylesheet’ type=’text/css’>

    font-family: ‘smokumregular,arial’;

    I have confirmed that

    sandbox/wp-content/uploads/fonts/smokum

    does exist.

    It is a subdirectory of goodguys2greatmen.com

    In this directory is:

    Smokum-Regular.ttf
    generator_config.txt
    smokum-regular-demo.html
    smokum-regular-webfont.woff
    smokum-regular-webfont.woff2
    stylesheet.css

    the subdirectory

    specimen_files

    contains the files

    grid_12-825-55-15.css
    specimen_stylesheet.css

    contents of stylesheet.css:

    /* Generated by Font Squirrel (https://www.fontsquirrel.com) on February 11, 2017 */
    @font-face {
        font-family: ‘smokumregular’;
        src: url(‘smokum-regular-webfont.woff2’) format(‘woff2’),
             url(‘smokum-regular-webfont.woff’) format(‘woff’);
        font-weight: normal;
        font-style: normal;
    }

    Looking at this page

    http://goodguys2greatmen.com/sandbox/skippy-test-home-page/

    Which has this code:

    <span style=”font-family: smokumregular, arial;”>test text – this should be the smokum font.</span>

    <strong><span style=”font-family: smokumregular, arial;”>This text should be smokum font and bold.</span></strong>

    <span style=”font-family: ‘Arial Black’, Helvetica, sans-serif;”>this text is arial black</span>

    The smokum font is not appearing.

    I’ve looked for typos and other obvious mistakes but there’s gotta be something I’m missing…..

    #32111
    Weaver
    Keymaster

    You link statement:

    <link href=’//goodguys2greatmen.com/sandbox/wp-content/uploads/fonts/smokum/stylesheet.css’ rel=’stylesheet’ type=’text/css’>

    is incorrect in the generated HTML of your link above. The ‘ mark used in that statement is really not a single quotation mark. Looks like it might be  “closing quote” mark, which is not the same.

    #35599
    Skippy
    Participant

    You are correct.  That was the whole problem.

    Copy and paste.  Not always a good idea….

    Thanks.

    #55593
    wilderbee
    Participant

    Many attempts using various FontSquirrel downloads, much time.  Repeatedly copied from instructions that are linked on my Fonts & Custom settings page, which seems to be mostly a duplicate of ‘//guide.weavertheme.com/add-new-fonts-google-fonts-and-more/’.  I then substituted my differences into the copied code, hoping thus to avoid error.  Could not get any tested font to work.  The added fonts would show in the settings drop-down list but would not render on the site.  Also would not show when coded directly on a page.  Wondering if something had changed at FontSquirrel, WordPress, or Weaver.  Finally checked the forum, guess I should have done that first.  Thank goodness it had already been addressed, saved again by the forum!

    In my case for Step #8 a fuller path was the charm:  ‘//domain.com/dev/wp-uploads/fonts/font-name/stylesheet.css’  … etc.   A tweak on the instruction pages might help others.

    Thanks for all!

    #55614
    Weaver
    Keymaster

    @wilderbee – the more complete URL seems to be because you have some sort of custom install – perhaps on a subdirectory of your site’s host root directory. So I’m guessing your side address is really ‘example.com/dev’. I will add a note to the guide. I also assume if you used simply ‘/dev/wp-uploads/fonts/font-name/stylesheet.css’ that the fonts would still load (if my assumption was correct.)

    #55633
    wilderbee
    Participant

    Yes, the address I cited has a /dev/ node.  And yes, for the fun of testing, only need to included the nodes following the domain name.  Thus  ‘/dev/wp-uploads/fonts/font-name/stylesheet.css’ is sufficient.  Too bad the /dev/ must be included as it is one more potential bump when moving out of development.  But I can live with that!  Thanks!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.