adding custom fonts

[Skippy]

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.

[Weaver]

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.

[Skippy]

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?

[scrambler]

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.

[Weaver]

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.

[Gillian]

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.

[Weaver]

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.

[Skippy]

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…..

[Weaver]

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.

[Skippy]

You are correct.  That was the whole problem.

Copy and paste.  Not always a good idea….

Thanks.

[wilderbee]

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!

[Weaver]

@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.)

[wilderbee]

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!

[Author]

Posts