I suspect that the “web-safe” may be becoming an obsolete concern.
appended is HTML/CSS/Javascript for a standalone “Web-Safe Font Validator” page like:
Save the following as Web-safe.html and load into your browser. (I used ⬌ Left Right Black Arrow<br />↔ - Left-right arrow ↕ - Up-down arrow ⇔ - left right double arrow<br />⇐ - Left double arrow ⇑ - Up double arrow ⇒ - Right double arrow ⇓ - Down double arrow<br />➡ - Black Rightwards Arrow as the initial test string.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-Safe Font Validator</title>
<meta name="description" content="Web-Safe Font Validator: Test and display text in various web-safe fonts">
<meta name="keywords" content="web-safe fonts, font validator, typography">
<meta name="generator" content="Perplexity AI">
<meta name="date" content="2025-01-22">
<meta name="referrer" content="https://gramps.discourse.group/t/narrative-website-and-next-gramps-release/6825/8">
<!-- Perplexity prompt (Jan 2025)
"Create a compact and efficient standalone HTML page for a 'Web-Safe Font Validator'. The page should:
Have a form to input text
Display the input text in various web-safe fonts
(Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, and Brush Script MT)
Include JavaScript to detect if fallback fonts are being used
Use semantic HTML and include necessary meta tags
Please provide the complete HTML, CSS, and JavaScript code for this page."
sample test data to paste into the form:
⬌ Left Right Black Arrow<br />↔ - Left-right arrow ↕ - Up-down arrow ⇔ - left right double arrow<br />⇐ - Left double arrow ⇑ - Up double arrow ⇒ - Right double arrow ⇓ - Down double arrow<br />➡ - Black Rightwards Arrow
-->
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 10px;
max-width: 800px;
margin: 0 auto;
}
h3 {
margin: 1px 0;
font-size: 1.25em;
}
#fontForm {
margin: 10px 0;
}
#inputText {
padding: 5px;
width: 300px;
}
.fontDisplay {
margin: 10px 0;
padding: 5px;
border: 1px solid #ddd;
}
.fallback-indicator {
color: red;
font-size: 0.8em;
margin-left: 5px;
}
</style>
</head>
<body>
<h1>Web-Safe Font Validator</h1>
<form id="fontForm">
<input type="text" id="inputText" placeholder="Enter text to display" required>
<button type="submit">Display Fonts</button>
</form>
<div id="fontOutput"></div>
<script>
function checkFontLoaded() {
const testElements = document.querySelectorAll('.font-test');
testElements.forEach(el => {
const fontFamily = el.style.fontFamily.split(',')[0].replace(/['"]+/g, '');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '12px ' + fontFamily + ', monospace';
const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
const primaryWidth = context.measureText(text).width;
context.font = '12px monospace';
const fallbackWidth = context.measureText(text).width;
if (Math.abs(primaryWidth - fallbackWidth) < 1) {
el.insertAdjacentHTML('afterend', '<span class="fallback-indicator">(font family unavailable, Fallback used)</span>');
}
});
}
document.getElementById('fontForm').addEventListener('submit', function(e) {
e.preventDefault();
var inputText = document.getElementById('inputText').value;
var fontOutput = document.getElementById('fontOutput');
var webSafeFonts = [
{name: "Arial", family: "Arial, sans-serif"},
{name: "Verdana", family: "Verdana, sans-serif"},
{name: "Tahoma", family: "Tahoma, sans-serif"},
{name: "Trebuchet MS", family: "'Trebuchet MS', sans-serif"},
{name: "Times New Roman", family: "'Times New Roman', serif"},
{name: "Georgia", family: "Georgia, serif"},
{name: "Garamond", family: "Garamond, serif"},
{name: "Courier New", family: "'Courier New', monospace"},
{name: "Brush Script MT", family: "'Brush Script MT', cursive"}
];
fontOutput.innerHTML = '';
webSafeFonts.forEach(function(font) {
var fontDiv = document.createElement('div');
fontDiv.className = 'fontDisplay';
fontDiv.innerHTML = '<h3>' + font.name + '</h3>' +
'<div class="font-test" style="font-family: ' + font.family + ';">' + inputText + '</div>';
fontOutput.appendChild(fontDiv);
});
// Call the function after a short delay to allow fonts to load
setTimeout(checkFontLoaded, 100);
});
</script>
</body>
</html>