Graybeard
Well-Known Member
This is not that hard to do ...
tree .
├── font
│ ├── Franchise-Bold.ttf
│ └── Noticons.woff
├── sample.html
1 directory, 3 files
use this tool upload your desired font:
Online @font-face generator
don't use too many fonts on the same page but for some accent ...
HTML:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Embed Custom Fonts</title>
<style>
@font-face {
font-family: 'Noticons';
src: url('font/Noticons.woff') format('woff');
}
@font-face {
font-family: 'Franchise';
src: url('font/Franchise-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
body {
font-family: Noticons;
font-weight: normal;
font-style: normal;
font-size: 1.2em;
}
.headline {
font-family: 'Franchise';
font-size: 3.2em;
font-weight: bold;
font-style: normal;
}
</style>
<head>
<body>
<div class="headline" style="text-transform: capitalize; text-align: center">
Headline font embed</div>
<p>this is "Noticons"</p>
<p style="font-size: 0.8em;">smaller text style</p>
<a href="https://transfonter.org/">transfonter.org</a>
</body>
</html>tree .
├── font
│ ├── Franchise-Bold.ttf
│ └── Noticons.woff
├── sample.html
1 directory, 3 files
use this tool upload your desired font:
Online @font-face generator
don't use too many fonts on the same page but for some accent ...
