Member Avatar for PhilEaton

Hi! An issue I'm having is using CSS's font-family code to change the font of my website's text. However, the issue is that the font I need is not native to Windows. I know I could download the font and view it like that. But this is of course not a valid solution for my viewers. Is there any way I can include a font package on my server so that all viewers regardless of OS or having the font can view the font I choose? Any help would be great! Thanks.

  • 3 Contributors
  • 3 Replies
  • 221 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Gabriela34

Dani AI

Generated

Quick expert note for (and thanks to for the CDN point):

You can absolutely serve the font from your own server using CSS @font-face, or use a hosted service for convenience and potential cross-site caching. Self-hosting gives you full control but triggers two requirements you should not skip: confirm the font’s web-embedding license, and serve formats and headers that browsers expect.

Practical checklist and example

  • Get or generate a webfont kit that includes modern formats (WOFF2, WOFF) and only the weights/glyphs you need.
  • Verify the font license allows web embedding; buy a webfont license if required.
  • Put fonts in a public folder, set correct MIME types and long cache headers. If fonts will be used cross-origin, add the appropriate CORS header.
  • Use font-display to avoid invisible text while the font loads.

Example @font-face (place in your CSS):

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2'),
       url('/fonts/MyFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Performance and UX tips

  • Subset fonts (remove unused glyphs) and limit weights to cut bytes.
  • Preload a critical font if it’s essential for first paint:
    <link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin>
  • Test on slow networks and check FOUT/FOIT behavior across browsers; provide sensible fallback stacks like font-family: 'MyFont', system-ui, Arial, sans-serif;.

Final note
Using a popular CDN (as mentioned) can reduce perceived load for visitors who already have that font cached, but self-hosting with the steps above gives the most control and predictable behavior—so choose based on license, control, and performance needs.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

check out google webfonts for the solution, they have implemented a pretty good system that works,
you can do it yourself,
BUT, big but,,
do you want to add between 15 and 90 seconds to download page times,
If you use google, there is a pretty good chance that the font you want will be DL by another google user/designer, like all the javascript library, and you wont get apparant downlodelays, as the font will be in TIF

Edited by almostbob because: dumbo, forgot the link
Member Avatar for PhilEaton

Perfect, thank you so much!

Member Avatar for Gabriela34

Good to know.

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.