Fonts
Contents
Fonts¶
Fonts are used via the font-family CSS property, like
body {
font-family: "Courier New", Courier, monospace;
}
The code above means that the browser will display the text in “Courier New” if it’s installed on the device of the visitor, otherwise it will try it with Courier and if that does not work, it will use the default monospace font of the specific device. Therefor it’s recommend to always use the generic font family (serif, sans-serif, monospace, cursive) as fallback.
Embedding font files¶
For demonstration purpose we’ll embedd the fonts Hack and Fengardo Neue.
Embedding through urls¶
Some fonts can be embedded easily through inserting a link into the head of your html document. This code is provided by the website of Hack:
<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
Then you can use it inside your CSS like
h1 {
font-family: Hack, monospace;
}
But for that your browser needs permission to access the internet, commonly through the usage of a localhost.
It’s recommended to use a CDN service like jsdelivr. Cloudflare is not recommended. Using GoogleFonts via links is against the DSGVO. If you like to include fonts from Google, download them and put them in a folder on your server.
Embedding through files¶
Here we can find instructions on how to embedd the font on our own server.
We can get the fonts and in addition a css file called hack-subset.css. Store this inside the css folder. Place the woff and woff2 files inside a folder fonts on the same level.
project_folder
├── index.html
├── css
├── style.css
├── hack-subset.css
├── fonts
├── hack-bolditalic-subset.woff
├── hack-bolditalic-subset.woff2
├── hack-bold-subset.woff
├── hack-bold-subset.woff2
├── hack-italic-subset.woff
├── hack-italic-subset.woff2
├── hack-regular-subset.woff
├── hack-regular-subset.woff2
The folder structure above requires a little adaption of the URLs in hack-subset.css:
src: url('fonts/hack-regular...')
becomes
src: url('../fonts/hack-regular...')
Include the fonts via the stylesheet into the head of index.html:
<link rel="stylesheet" type="text/css" href="css/hack-subset.css">
Inside style.css:
h1 {
font-family: Hack, monospace;
}
It is also possible to include the fonts (the code inside hack-subset.css) directly into your style.css file, but having separate files increases your modularity and makes it easier to maintain your page.
fengardo-neue.css
/* https://velvetyne.fr/fonts/fengardo-neue/ */
@font-face {
font-family: 'Fengardo Neue';
src: url('../fonts/fengardoneue_regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fengardo Neue';
src: url('../fonts/fengardoneue_black-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
If available, the format woff2 is recommended, followed by woff and otf and ttf.
Here is a tool for converting file types into woff.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Fonts</title>
<!-- <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'> -->
<link rel="stylesheet" type="text/css" href="css/hack-subset.css">
<link rel="stylesheet" type="text/css" href="css/fengardo-neue.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1><span>San Felipe incident</span></h1>
<p>On October 19, 1596, the Spanish ship San Felipe was shipwrecked in Urado on the Japanese island of Shikoku en route from Manila to Acapulco in the Manila-Acapulco Galleon Trade. The local daimyō Chōsokabe Motochika seized the cargo of the richly laden Manila galleon, and the incident escalated to Toyotomi Hideyoshi, ruling taikō of Japan. The pilot of the ship incautiously suggested to Japanese authorities that it was Spanish modus operandi to have missionaries infiltrate a country before an eventual military conquest, as had been done in the Americas and the Philippines. This led to the crucifixion of 26 Christians in Nagasaki, the first lethal persecution of Christians by the state in Japan. The executed were later known as the Twenty-Six Martyrs of Japan.<br>
<a href="https://en.wikipedia.org/wiki/San_Felipe_incident_(1596)" target="_blank">wikipedia</a></p>
</body>
</html>
style.css
body {
background-color: antiquewhite;
color: tomato;
font-family: "Fengardo Neue", sans-serif;
cursor: default;
}
h1 {
font-family: Hack, monospace;
font-size: 2.4rem;
text-align: center;
}
p {
font-size: 1.2rem;
text-align: justify;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:before {
content: '\21B3';
font-size: small;
}
a:hover {
border-bottom: 2px solid;
}
Have a look at the CSS code related to a: a:before and a:hover.
https://unicode-table.com offers a list of unicode characters, like \21B3.
Here is another variant for a:before and a:after. Of course you can use any other symbols (like emojis) as well:
a:before {
content: '[';
}
a:after {
content: ']';
}
This is an easy way to style for e.g. links without the need to insert this characters for every link inside the HTML code. So it’s very easy to change it as well.
Here you can try out different possible cursors.
Font sizes¶
There are several units available to define the size of text.
Em¶
font-size: 1em;
This unit is related to the font size specified in the settings of the browser of the visitor. By default it’s 16px and 1em = 16px.
Furthermore em is related to the font size of parent elements inside an HTML document, which can lead to some confusion.
Rem¶
Rem is not related to parent elements, but to the root font-size of the HTML document. This can be defined through :root or html:
:root {
font-size: 18px;
}
or
html {
font-size: 18px;
}
In this example, 1rem = 18px.
The advantage of rem over em is that it’s easier to control, because everything is related to one size defined in the :root/ html section of the CSS file.
For a demonstration see for example: https://stackoverflow.com/a/44492767
Vw/ vh¶
font-size: 4vw;
Vw (viewport width) and vh (viewport height) are units related to the size of the browser window (viewport). 1vw is 1% of the width of the windows, 1vh 1% of the height of the viewport. The element (in this case the font size) adapts automatically to the window/ device. But it comes with less control than the other units.