enabling local web fonts

Every now and then I come across a requirement where a client asks that their website be able to run with limited or no internet connection. This may be because it is being used as an intranet site, or that their internet access is restricted, or for some other reason.

As WordPress can run locally this isn’t a problem except for those instances where the site relies on external resources – such as fonts. As a result it is then necessary to include the font files as part of the WordPress theme and not have to rely on third-party providers like Google Fonts.

Google fonts

It is possible to go to Google Fonts and download the font files that you need. Navigate to Google Fonts and search for the font that you require. Select the weights you want and in the right-hand corner of the screen you will see a small arrow that will allow you to download the font to your computer:

Button to download Google Fonts
Button to download Google Fonts

It is interesting to note that Google Fonts pops up a warning saying that you do not need to download the font to use it on your webpages, which is true, as you can just link to their site, but we are trying to avoid doing that:

Google Fonts Download Warning
Google Fonts Download Warning

The problem with downloading your selected fonts from Google is that all you get are the web fonts. In order to enable local web fonts, you also need to provide the CSS so the browser knows how to use the specific font files. Different browsers use different font types and so you need to serve up all the information about each font in a proper CSS file. Unfortunately, Google Fonts doesn’t generate the CSS for you, but fortunately there is a service that does.

Google webfonts helper

Google Webfonts Helper uses the Google Fonts API to get both the font files and also generates the necessary CSS for everything to work.

So rather than download the fonts directly from the Google Fonts directory is it better to head over the the Google Webfonts Helper website and download them from there.

Once there you can search for the fonts you want and then select the style weights that you require and the CSS will be automatically generated for you.

You can then copy and paste the CSS and download the webfonts zip file:

Download CSS and fonts from Google Webfonts Helper
Download CSS and fonts from Google Webfonts Helper

One tip is that you may want to customize the folder prefix to point to where you are going to store the font files.

Finally …

The final step (if you are using WordPress) is to remember to enqueue the fonts in functions.php

underscores WordPress theme pages

The underscores WordPress template comes with a number of different pages and folders. They are as follows:

pages:

index.php

This page is used to display the main blog page

single.php

This page displays single posts.

page.php

For single pages.

archive.php

For all archive pages including categories, tags, and author archives.

search.php

The search results page.

404.php

The error page.

main elements

  • header.php
  • sidebar.php
  • and footer.php.

folders:

underscores (or _s) also has five folders:

  • inc ~ which has extra template functions and features;
  • js ~ which holds all the JavaScript files;
  • languages ~ translation files;
  • layouts;
  • template-parts ~ which contains the content loops, content-none.php, content-page.php, content-search.php, content-single.php, and content.php

the assignment sandwich

The Assignment Sandwich

Sketchnotes from a talk by Mary Lea “Digital Literacies: Exploring textual practices in a digital higher education”

Teachers give an assignment and then grade the submission

But what about the stuff in the middle?

What happens between giving an assignment and grading the assignment? Do teachers see what happens? Do students share what happens? Do we talk about what happens during this process? do we know what is there? What is in the middle?

Very little attention is paid to the middle of the assignment sandwich!

So what can we do about it? Well we can make it visible. We can share it. We can talk about it. Maybe even get the students to submit it with their assignment.

What we must not do is marginalise the process.