Member Avatar for varundeveloper 
embed fonts even when not available on client's system
  • 3 Contributors
  • 4 Replies
  • 111 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Good thread — was pointing in the right direction and correctly called out a fallback option. For a reliable, maintainable solution today, use real webfont files (WOFF/WOFF2 for modern browsers) that you are licensed to embed, or pick a hosted service such as Google Fonts. A generator like Font Squirrel will produce a cross‑format kit and help with subsetting to reduce file size (Font Squirrel webfont generator). See the official docs for the mechanics and options: MDN @font-face documentation.

When a hosted/served webfont fails to load, the usual culprits are wrong paths, blocked requests (CORS), incorrect MIME types, or licensing/format issues. If you host fonts on a CDN or a different domain, set a CORS header (for example Access-Control-Allow-Origin: * for testing; prefer a specific origin in production). Use the browser DevTools Network tab to watch the font request, status code, response headers and any console errors.

Two practical UX tips: 1) Avoid invisible text by using the font-display strategy (e.g., font-display: swap) so the page shows system fonts until the webfont loads. 2) Preload critical fonts and subset them (WOFF2 gives the best compression today) to speed rendering. Browser support details change over time—check compatibility before optimizing (Can I use — CSS fonts).

If the goal was decorative headings only, raster images (as suggested) work but harm accessibility, scaling and SEO. Prefer SVG text for vector crispness or use webfonts with proper fallbacks for accessibility and selectable text. This answers ’s “what fonts can I use” question: any font you have the right to serve, converted/exported to modern web formats (WOFF/WOFF2) or chosen from a licensed provider.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

place the font on your server

@font-face {font-family: THISFONT; src: url(resolved-path-to-THISFONT.ttf);}

then you can reference the font

Member Avatar for varundeveloper

thats good ... but it didn't work when i delete the font from my system to view as if i don't have the font installed.... it didn't work....

what kind of fonts can i use....

Member Avatar for almostbob

Ooops

Sorry
only Chrome has yet implemented font embedding, I tried it a few times, curious, but do not know whether that part of css2 is widely implemented yet
there are some discussions and tutorials on embedding fonts in web pages using the .eot standard. but for practical purposes, visitors wont be able to acess the font in 'common' browsers, it wont work

http://bloggingdiary.com/css-embedded-fonts-and-the-font-face-rule/

Member Avatar for MidiMagic

The only way I know to compatibly include a font the user does not have installed is to create an image file containing the text in the font you want, and put the image on the website.

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.