Installing font for offline intranet website use

Question

I am trying to install a font to be used offline while developing a Wordpress website. This is what I have tried to do, and it still does not work:

Created the fonts via fontsquirrel.com
added the contents of the file to /wp-content/themes/myTheme/font
in my style.css file I added the following code :

@font-face {
    font-family: 'latobold';
    src: url('/font/Lato-Bold-demo.eot') format('eot');
    src: url('/font/Lato-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/Lato-Bold-webfont.woff2') format('woff2'),
         url('/font/Lato-Bold-webfont.woff') format('woff'),
         url('/font/Lato-Bold-webfont.ttf') format('truetype'),
         url('/font/Lato-Bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

I then tried to change the body font via the following code :

body {
font-family: 'latobold', sans-serif;
}

My font defaults to something else sans-serif. If I remove the sans-serif, it's Times New Roman. I think I have a url pathname issue.

Once you have visited the site it should cache the files for offline use. Possible duplicate: http://stackoverflow.com/questions/15930003/downloading-a-google-font-and-setting-up-an-offline-site-that-uses-it — dowomenfart, Feb 25 '15 at 19:35
@dowomenfart I saw that thread, which led me to where I am. Do you mean the googlefonts site? — user25976, Feb 25 '15 at 19:41
Since you already did everything with fontsquirrel.com. You don't need google fonts. Have you checked to make sure that your files are being loaded? You can check by opening your console and going to the network tab and look for the files being loaded. — dowomenfart, Feb 25 '15 at 19:46
@dowomenfart I have GET packets for the fonts. Now that the font file is within the theme file, and my url is simply '/font/latobold.ttf', the GET packet shows GET http://localhost:8888/font/Lato-Bold-webfont.ttf — user25976, Feb 25 '15 at 20:54
@JacobGray It shows that the fonts are loading. I posted a comment with the GET packet the network panel of the console shows. I don't, however, see my font still. — user25976, Feb 25 '15 at 22:41

score 0 · Accepted Answer · answered Feb 25 '15 at 19:52

Fist of all, you font files shouldn't be inside /wp-content/font folder. Assuming your theme folder is called myawesometheme.

You really should put the font folder here:

/wp-content/themes/myawesometheme/font

The path to your style.css will be like this:

/wp-content/themes/myawesometheme/style.css And inside like this for the fonts:

@font-face {
    font-family: 'latobold';
    src: url('font/Lato-Bold-demo.eot') format('eot');
    src: url('font/Lato-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Bold-webfont.woff2') format('woff2'),
         url('font/Lato-Bold-webfont.woff') format('woff'),
         url('font/Lato-Bold-webfont.ttf') format('truetype'),
         url('font/Lato-Bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

You said your generated the code from fontsquirrel.com It's quite reliable. Just to make sure the font file is working and not corrupted before uploading. And double check the font name for font-family

I guess Google fonts is not a option, as you said "offline developing". But you can actually download that font from there.

Installing font for offline intranet website use

1 Answers1