Skip to main content
V
VShaneCurtis
Inspiring
March 6, 2022
Question

Including Fonts In A Web Site

  • March 6, 2022
  • 2 replies
  • 359 views

Hello Guys,

I am crossing over into unexplored territory and I am hoping that someone can answer a few questions for me.  I am a big fan of the band Rush and I have a collection of fonts that were created bt a third party.  These fonts represent the various fonts that have been used as part of their album artwork.   These fonts are ttf and eot files.   I would like to include these fonts as part of a possible business web site I am designing.  My first question is, will these fonts work?  I am assuming so because they're being used as part of the web site where I found them.  Next question is, how do I include them in the web site?  I'm assuming I just create a fonts directory within the root folder of my web site and copy them into that folder.   And Yes I understand that I don't need to copy them all, just the ones I'm using in the web site.  I would probably initially copy them all so I could experiment with them and see what works and what doesn't.  Do I need to copy the eot files or no?   Thanks for the assist.

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 6, 2022

    I must caution you about the legal use of proprietary fonts.  Not all custom fonts are licensed for use on the web.  In fact the band RUSH may have exclusive rights to use their font as part of their branding identity.  If your font license does not extend to the web, you cannot use it on a commercial/business website.

     

    To avoid legal hassles, you should stick with fonts that have been cleared for web use.  Adobe web Fonts and Google web fonts are cleared for web use.  Adobe Fonts has wide inventory of fonts to choose from that are free with your paid Creative Cloud plan.  Google Fonts are also free but the list of choices is smaller.

    https://fonts.adobe.com/

    https://fonts.google.com/

     

    One other caveat.  Custom web fonts take longer to load and add bandwidth to your site.  On devices with slower connection speeds, this can slow down site performance.

     

    For ordinary text, use font-families that are common to Win/Mac/Android devices from the CSS Font Stack.

    https://www.cssfontstack.com/

     

    Nancy O'Shea— Product User & Community Expert
      V
      VShaneCurtisAuthor
      Inspiring
      March 7, 2022

      Nancy,

      Thank you for your warning but it is not necessary.   These fonts were created by another fellow Rush fan for this purpose.  There are NO legal hastles involved here.  The fonts were created for this purpose.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 7, 2022

      If you're certain you can use this font on the web, you'll need to upload the various font file types to a font folder on your server  -- EOT, TTF, WOFF, SVG and SVGZ (gzipped SVG).  Perform through tests to ensure all font-styles are supported -- bold, italic, oblique, upper and lower case.

       

      Also add comparable fallback fonts for devices like Androids & iPhones to your CSS font-family list.  That way, users will see something while custom fonts are loading.  

       

      Nancy O'Shea— Product User & Community Expert
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      March 6, 2022

      This article may help https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices