@dfds-frontend/fonts
v0.0.4
Published
DFDS fonts
Downloads
657
Readme
DFDS fonts
Unofficial library for DFDS
There is one font family with four variants: normal, bold, light and cursive. The font names follows the common weight naming convention
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping
main font from CDN
load the font by inluding this in html
<link rel="stylesheet"
href="https://unpkg.com/@dfds-frontend/fonts/main/font.css">
or import it from css
<style>
@import "https://unpkg.com/@dfds-frontend/fonts/main/font.css";
</style>
or load it dynamically from javascript
<script
src="https://unpkg.com/@dfds-frontend/fonts/main/font.js">
</script>
apply the font in css
body {
font-family: DFDS, sans-serif;
}
.font-bold {
font-weight: bold;
}
.font-light {
font-weight: 300;
}
.font-italic {
font-style: italic;
}
use the font
<p>this is a normal font</p>
<p class="font-bold">this is a bold font</p>
<p class="font-light">this is a light font</p>
<p class="font-italic">this is a italic style</p>
main font from npm
- npm install @dfds-frontend/fonts
- the files are in node_modules/@dfds-frontend/fonts
load the font by inluding this in html
<link rel="stylesheet"
href="node_modules/@dfds-frontend/fonts/main/font.css">
demo
- https://codepen.io/kunukn/pen/63b15fbc49c236e54d2981ddbf3daf5b
- https://codesandbox.io/s/p7oqjovn8m
- https://codepen.io/kunukn/pen/f8e01e22b7a7c080fca0b31d5acfb1b6?editors=0010
preload fonts
<link rel="preload"
href="https://unpkg.com/@dfds-frontend/fonts/main/DFDS-Regular.woff2"
as="font" type="font/woff2" crossorigin>
<link rel="preload"
href="https://unpkg.com/@dfds-frontend/fonts/main/DFDS-Bold.woff2"
as="font" type="font/woff2" crossorigin>
<link rel="preload"
href="https://unpkg.com/@dfds-frontend/fonts/main/DFDS-Light.woff2"
as="font" type="font/woff2" crossorigin>
<link rel="preload"
href="https://unpkg.com/@dfds-frontend/fonts/main/DFDS-Italic.woff2"
as="font" type="font/woff2" crossorigin>
more
To see all the available CDN files go to
https://unpkg.com/@dfds-frontend/fonts/