Member Avatar for Samuccaya

I saw a post from a few years ago on how to load fonts into my server and imbed them so that other viewers can see them. There was a code given that was @font-face {
font-family: yourfont;
src: url('yourfont.ttf');
} Do I put this code into the CSS portion of my document? I don't know where to put it.

  • 4 Contributors
  • 4 Replies
  • 147 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Good start, . and covered where to place the rule; below are practical, modern steps and a minimal working example to make custom fonts reliable and fast.

  • Pick a font with a web license and generate modern web formats (WOFF2, WOFF). A generator can help if you only have a TTF/OTF: Font Squirrel Webfont Generator.
  • Prefer WOFF2 for modern browsers and include WOFF fallback. Add font-display to avoid blocking text rendering; provide a sensible fallback font stack.
  • Upload the font files to a public folder on your server. Note: URL paths in CSS are resolved relative to the CSS file location.
  • If fonts are served from another domain, enable CORS (Access-Control-Allow-Origin) on the font host. For general guidance see MDN on CORS and on @font-face syntax: @font-face — MDN and .

Example (place in your stylesheet):

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

Troubleshooting quick checks:

  • Use DevTools Network to confirm the font files load (200) and are not blocked by CORS or 404s.
  • If text never appears, check font-display and try swap while debugging.
  • If older IE support is required, consider supplying legacy formats or a hosted solution.
  • Always verify the font EULA — some fonts forbid self-hosting; hosted services (as noted) are an easier alternative when licensing or performance is a concern.

Recommended Answers

All 4 Replies

Member Avatar for pixelsoul

Yes, that is CSS that you would put in your stylesheet preferably. It can go into the head of your document, but it's not really suggested.

Here is a pretty good blog article on using custom fonts
http://css-tricks.com/snippets/css/using-font-face/

Edited by pixelsoul
Member Avatar for Samuccaya

Thanks a lot, very helpful.

Member Avatar for zubaer_ahammed

Yes, you can put this code in your stylesheet or CSS document. Then you can use font-family : yourfont; to your posts or articles.

Member Avatar for mattster

Also, don't forget to look at !

They make insterting fonts easy, and theres a massive selection of all types of fonts.

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.