Web Fonts and favicons

Web fonts

Browse for fonts on Google Fonts or Font Squirrel

If only the otf fonts are available use the Font Squirrel Generator to generate the webfonts

On this page Click Upload Fonts (seems counter intuitive to download the font and reupload it but does not appear to be an option to create them directly)

Click “Expert”

In “Font Formats” choose the following: TrueType, WOFF, WOFF2, EOT Compressed, SVG

In “Protection” choose “Web Only (disable Desktop use)”

In “OpenType Features” choose “Keep All Features”

In CSS change the CSS Name to “<name of your font>.css”

In Agreement click “Yes, the fonts I’m uploading are legally eligible for web embedding.”

Click “Download your kit”

Once downloaded extract the contents of the zip file. I usually move the .html files, the generator_config.txt and the specimen_files directory to a sub-directory called “demo” leaving only the font files and css in the top directory.

The generator does not change the html files to use the new name given to the css file. To use the demo files edit the files and change “stylesheet.css” to “../<name of your font>.css”

You may want to edit the css file to use title case for the font family names e.g the gererator may have called the bold version of the montserrat font “montseratbold” it is clearer to change this to “MontserratBold” making it easier to read. Also change montseratregular to simply “Montserrat” (To use the demo files you will also need to change the reference to the fonts)

To use the fonts on your page copy then to web/static/web/font and include the line:

<link rel="stylesheet" href="{% static 'web/font/<name of your font>.css' %}" type="text/css" charset="utf-8" />

In your style sheet include the font using the names defined in the font css file e.g.:

body {
  font-family: 'MontserratBold' sans-serif;
}

Favicons

Tip

07/03/2022, This article may be useful, How to Favicon in 2022: Six files that fit most needs

Go to the Favicon Generator site

Click Select your Favicon picture and select the image you want as your favicon (this should be square at least 260x260 in size).

A new page is displayed you can normally accept the default options with the exception that in the Favicon Generator Options section Click I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here: and enter /static/ico/ in the box below it (if you don’t do this you will need to edit manifest.json and browserconfig.xml to fix the paths). Then go to the bottom of the page and click Generate your Favicons and HTML Code.

The Install your favicon page is displayed, click on the button called Favicon Package to retrieve the zip file containing the favicons and config files.

The rest of the instructions on the favicon generator page need to be modified slightly for a django project. Use the instructions below instead

Create a the directory in project/static for the favicon files if it does not already exist using the command:

mkdir -p project/static/ico

Extract the contexts of the zip file to this directory.

Copy the following text into the head section of your base template (preferably near the start of the head section):

<link rel="shortcut icon" href="{% static 'ico/favicon.ico' %}">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'ico/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'ico/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'ico/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'ico/manifest.json' %}">
<link rel="mask-icon" href="{% static 'ico/safari-pinned-tab.svg' %}" color="#5bbad5">
<meta name="msapplication-config" content="{% static 'ico/browserconfig.xml' %}">
<meta name="theme-color" content="#ffffff">

Tip

The head section is included in our base app: https://gitlab.com/kb/base/blob/master/base/templates/base/base.html

Essentially this is simply the code shown in step 3 of the favicon generator site but using the static template tag e.g.:

href="/static/ico/apple-icon-57x57.png"

is changed to:

href="{% static 'ico/apple-icon-57x57.png' %}"

After you deploy check that your project conforms to standards by using the favicon checker