Member Avatar for momonq1990

hi to master :) pls help, how can i use and fix all fonts thats not in safe font in web.

  • 5 Contributors
  • 5 Replies
  • 237 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by stultuske

Dani AI

Generated

— concise checklist and fixes when a Google font shows in Firefox but not in other browsers. was right that webfonts must be included correctly, and 's point about legacy IE formats matters only for very old Internet Explorer versions. Most cross-browser failures come from how the font is loaded, blocked, or overridden, not from the font file itself.

Common causes and quick checks:

  • Include the Google Fonts stylesheet in the document <head> (before your site CSS) and add a preconnect to speed up/avoid some loading problems. Example:

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

  • Use the exact font-family name Google provides (quote names with spaces) and add sensible fallbacks. Inspect the computed font in DevTools to see what the browser actually picked.

  • If self-hosting, supply modern formats (WOFF2, WOFF) and EOT only for very old IE; serve fonts with correct MIME types and CORS headers. Check Network/Console for 4xx/blocked/mixed-content messages.

  • Test pages must be served over HTTP(S) — file:// testing can hide font-loading behavior. Also temporarily disable extensions/privacy settings that block third-party fonts.

Additional notes: using font-display=swap (or the equivalent Google Fonts query parameter) reduces invisible-text flashes. As suggested, image text can be a last-resort for decorative headings, but images lose accessibility, responsiveness, and SEO — prefer SVG text or properly loaded webfonts whenever possible.

To isolate the issue, make a minimal single-page test (head with Google Fonts link, one element using the font) served from a web server and check the browser console and Network tab for font errors.

Recommended Answers

All 5 Replies

Member Avatar for Member #949455

hi to master :) pls help, how can i use and fix all fonts thats not in safe font in web.

Can you at least be more specific?

Member Avatar for momonq1990

i used font from google.com/fonts and it looks like good at moz browser but not in other browser. how can i fix the font to other browser vendor?

Member Avatar for almostbob

did you use the code supplied, that loads the eot font for 'other browsers' or did you not
is the other browser IE6
did you read the instructions, including fault finding, google apis are pretty good

Member Avatar for flashhtml5

You will need to embed non-standard fonts using the @font-face CSS directive. Otherwise, it is always a good practice to list more than one font in the font-family CSS property - in order of precedence if one is not available.

Two examples using this above approach are:

Example #1:

.headerfont {
   font-family: Tahoma, Arial, Helvetica, 
                sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #000000;
}

Example #2:

@font-face {
  font-family: 'my_custom_font';
  src: url('path-to-font-file.ttf');
}
.customheaderfont {
   font-family: my_custom_font, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #000000;
}

Please note that only a small set of font file types are supported by the @font-face directive.

Regards - Shawn

Edited by pritaeas because: Removed url from fake signature. Check the signature option in "Edit Profile".
Member Avatar for stultuske

if you do want to use a font (for titles or such) that doesn't go well with certain browsers, create an image for that title and place that.

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.