Member Avatar for Papa_Bear

Hi All.
I want to allow users to select a font using a dropdown box. As every body has different fonts installed, how do I read the available fonts. I know this will be a very long list, but will not be used very often. I will store the selected font and size on a database for later use.
Thanks

  • 2 Contributors
  • 1 Reply
  • 302 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ArtistScope

Dani AI

Generated

A practical approach that fits ’s goal is to avoid trying to enumerate every font on the client and instead offer a curated, cross‑platform set with a live preview and a sensible fallback stack. Browsers resolve fonts from a prioritized font-family list, so including a generic family as the last fallback prevents broken rendering when a chosen face is unavailable. (developer.mozilla.org)

If runtime detection is required (for example to hide choices that aren’t present), do it client‑side only. Modern options include the CSS Font Loading API (document.fonts) and its check() method, or the tried‑and‑true width‑measurement trick (render offscreen text in a known fallback then compare dimensions). Each method has caveats: document.fonts.check() avoids forcing loads but can be misleading in some edge cases, while measurement is more robust but a bit hacky. Use these only to improve the UI, not as a server trust source. (developer.mozilla.org)

For guaranteed appearance across all users, deliver a web font via @font-face (self‑hosted or a provider like Google Fonts) and fall back to system faces for speed. Preload or manage font downloads with the Font Loading API to reduce layout shifts. Balance consistency against performance: many web fonts add latency unless optimized. (developer.mozilla.org)

Privacy and stability notes: enumerating user fonts can contribute to browser fingerprinting, so limit probing and respect user privacy; modern browsers and privacy tools increasingly reduce font fingerprint surface. Store the final preference where appropriate — localStorage for per‑browser persistence or the database for account‑level settings — but always normalize and escape stored font names before injecting them into CSS. (kittens.eff.org)

Member Avatar for ArtistScope

I think that you need to stick to common fonts because you can't find out what fonts they may have installed, and if you could then you might have a list of too many fonts, some of which may not display on a web page. For example, on my computer I have hundreds of fonts installed, so you can imagine the trouble that you can get into.

As for loading a font to be used in a web page, that's no problem, but initially you don't need to use a database at all if you can write the font name to a cookie, which may be better because the user gets the same font loaded when they return.

So all you need to do is create a dropdown in a form with some font names listed. Use a submit button or an onchange statement to submit the new info to the same page for the page to load the font.

<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
<%
strFont = request("Font")
if strFont <> "" then
    response.cookies (Font)("Style") = strFont
end if

if Request.Cookies(Font) <> "" then
   strFontSet = Request.Cookies(Font)("Style")
else
   strFontSet = "Tahoma"    'set a default font
end if

%>
<form action="">
<select name="Font" size="1" onchange="MM_jumpMenu('parent',this,0)">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
</select>
</form>
<br>
<font face="<%= strFontSet %>">This is my text</font>

I didn't test this code, but it should give the idea.

Edited by ArtistScope because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.