11 Replies Latest reply: Mar 12, 2015 5:28 AM by Leopold Sikoronja RSS

    Webfont from Myfonts.com

    GRSM_PL78 Community Member



      I am to buy a Web font from myfonts.com (web versions of our corporate font) and I have no idea how to import one to MUSE...the font is not avialable in Typekit...any idea how to import it?




        • 1. Re: Webfont from Myfonts.com
          jgrummel Adobe Employee

          Apply this snippit of code into your <head> section:


              <style type="text/css">

               @font-face {

               font-family: yourfont;

               src: url('yourfont.ttf');


               p.customfont {

               font-family: "My Custom Font", Verdana, Tahoma; }



          You can add it here:


          Page << Page Properties << metadata


          Screen Shot 2012-07-31 at 2.45.08 PM.png

          • 2. Re: Webfont from Myfonts.com
            Rory_M Community Member

            Thanks jgrummel, I have been trying to work out how to do this in Muse for ages. But I'm no code expert, so can you please provide an example of the code where the font name is XXXX and let us know how to use the font within Muse? Also, I understand different browsers need different types of font and not just truetype, so will this code work with all browsers?

            • 3. Re: Webfont from Myfonts.com
              Abhishek Maurya Adobe Employee



              Please refer to this document,


              Adding fonts to your site - http://help.typekit.com/customer/portal/articles/6780-adding-fonts-to-your-site


              As Julia pointed, you can add the information to the head section via page properties. Make sure when you create a kit, your website domain is added there, http://project02.businesscatalyst.com/Jing/2012-08-02_0134.png



              Abhishek Maurya

              • 4. Re: Webfont from Myfonts.com
                Rory_M Community Member

                Sorry Anhishek, the question was in regard to a font that isn't on Typekit. My client has specified that he must be hosting the font on his own server and can not use Typekit, Google Fonts or any other hosting.

                • 5. Re: Webfont from Myfonts.com
                  Abhishek Maurya Adobe Employee

                  Hi Rory_M,


                  I would refer you to the documentation at myfonts.com. You will have to get in touch with them so that they can provide you the steps that are needed to successfully use their fonts on your website. If that requires you to insert certain code on your web site then you can either use Page Properties -> Metadata or Object -> Insert HTML.


                  Most probably, you will have to upload the font on your server and use the CSS @font-face to apply the font. If you have a page live on which you are having problems, you can share it with me and I will see if I can point you in the right direction.



                  Abhishek Maurya

                  • 6. Re: Webfont from Myfonts.com
                    Rory_M Community Member

                    Thanks Abhishek


                    What I am looking for is the @font-face code to paste into either Page Properties -> Metadata or Object -> Insert HTML to allow me to use a font that is hosted on the same server as the Muse website (in the same folder) in EOT, TTF and WOFF formats for cross-browser compatibility, and then instructions on how to get Muse to use that font on text that I select within Muse.

                    • 7. Re: Webfont from Myfonts.com
                      Abhishek Maurya Adobe Employee



                      The code would look some thing like this,


                      @font-face {
                         font-family: 'MyFontFamily';
                         src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
                         src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
                         url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
                         url('myfont-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
                         url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */


                      You will not be able to use Muse to apply those fonts to the text. To do that you will have define the styles in a css file. You can create the text in Muse and the from the exported html check the IDs or classes assigned to the text containers and apply the style to those.



                      Abhishek Maurya

                      • 8. Re: Webfont from Myfonts.com
                        HerrFreund Community Member

                        How does it look now, 2 years later.
                        Is it now possible to integrate the eot/woff/etc in Muse or do i have to do the workaround with the exported html?

                        Thank you very much.

                        • 9. Re: Webfont from Myfonts.com
                          Abhishek Maurya Adobe Employee

                          At this stage you can only use the fonts that are available on your system as system fonts, web fonts or web safe fonts in Muse. To integrate the eot/woff/etc in Muse you will still need to use custom CSS.


                          - Abhishek Maurya

                          • 10. Re: Webfont from Myfonts.com
                            HerrFreund Community Member

                            ok, i have to do it like you described it in your post #7.

                            the line "without writing code" is not true.
                            and to use an own woff-font is no rocket-science, but daily business.

                            sadly but true

                            • 11. Re: Webfont from Myfonts.com
                              Leopold Sikoronja Community Member

                              if you are still interested, try this one: go to "add a web font" / select "self hosted web-fonts"

                              You need a font with woff. + .eot + .svg endings

                              You have then to choose a system font to work with in muse - which will be replaced, when you preview in browser or upload it.

                              You'll have to upload the fonts too, and there is a very small script (two lines) you'll get from MyFonts which you have to place in the head section of you master page(s).


                              Works fine with me ;-)