7 Replies Latest reply on May 28, 2014 4:35 AM by Boerresen

    @font-face not working in Firefox

    chrissieGu

      Hi,

       

      I've finally worked out how to add non-webfonts to Edge through the Font Squirrel generator. My Fonts are showing perfectly on my stage, in Safari and Chrome but firefox is using my fall back fonts.

       

      This is the CSS code:

       

      @font-face {

          font-family: 'de3_display_egyptianregular';

          src: url('gdnegyde3reg-webfont.eot');

          src: url('gdnegyde3reg-webfont.eot?#iefix') format('embedded-opentype'),

               url('gdnegyde3reg-webfont.woff') format('woff'),

               url('gdnegyde3reg-webfont.ttf') format('truetype'),

               url('gdnegyde3reg-webfont.svg#de3_display_egyptianregular') format('svg');

          font-weight: normal;

          font-style: normal;

       

      }

       

      .classname {

      font-family: 'de3_display_egyptianregular', Times, Georgia, serif;

      font-size:12px;

      color:#353535;

      }

       

       

      I have add the font through the Add font

       

      de3_display_egyptianregular, Times, Georgia, serif

       

      <link rel="stylesheet"href="Fonts/stylesheet.css"type/css"media-"screen" title="" charset=utf-8"/>

       

      Have I missed something??

        • 1. Re: @font-face not working in Firefox
          joel_pau Level 5

          About link tag:

          <link rel="stylesheet" href="Fonts/stylesheet.css" type="text/css" media="screen"/>

          More about link tag.

          • 2. Re: @font-face not working in Firefox
            chrissieGu Level 1

            Brilliant! Thank you for helping me.

            • 3. Re: @font-face not working in Firefox
              mobly Level 3

              Hi Chrissie

              I've just started looking at fonts in Animate, and not being very good at CSS etc, I'm at a bit of a loss as to where to place the CSS code!

              I understand that @font-face will help me embed the fonts so that they work when I import the OAM file into indesign to then create an iPad app. Thanks for your help, if you get time.

              Cheers

              Alistair

              • 4. Re: @font-face not working in Firefox
                mobly Level 3

                I've just started looking at fonts in Animate, and not being very good at CSS etc, I'm at a bit of a loss as to where to place the CSS code!

                I understand that @font-face will help me embed the fonts so that they work when I import the OAM file into indesign to then create an iPad app. Thanks for your help, if you get time.

                Cheers

                Alistair

                • 5. Re: @font-face not working in Firefox
                  chrissieGu Level 1

                  Hi Alistair,

                   

                  Embedding fonts took me a while to figure out but here you go:

                   

                  1: Open http://www.fontsquirrel.com/ and select @font-face Generator from the menu bar.

                   

                  2: Select +Add Fonts and select the fonts that you need to upload (Make sure that you have a license to use your fonts) and make sure the agreement box is selected.

                   

                  3: Hit the 'Download your kit' button.

                   

                  4: You should now have a folder in your downloads file containing your fonts and a file called 'spreadsheets.css'. Rename this folder and call it 'Fonts'. Drag your Fonts folder into your Edge Animate folder.

                   

                  5: Open the CSS file and add the following bold css code under each of your fonts. (You will need to amend it to match your font. i.e font family name, color etc)

                   

                  Should look like this:

                   

                  @font-face {

                      font-family: 'as32_agate_sansregular';

                      src: url('gdnagasantwoas32reg-webfont.eot');

                      src: url('gdnagasantwoas32reg-webfont.eot?#iefix') format('embedded-opentype'),

                           url('gdnagasantwoas32reg-webfont.woff') format('woff'),

                           url('gdnagasantwoas32reg-webfont.ttf') format('truetype'),

                           url('gdnagasantwoas32reg-webfont.svg#as32_agate_sansregular') format('svg');

                      font-weight: normal;

                      font-style: normal;

                   

                  }

                   

                  .classname {

                  font-family: 'as32_agate_sansregular'', Arial;

                  font-size:12px;

                  color:#353535;

                  }

                   

                  6: Open your Edge file, open the 'Library' and press the + symbol next to Font. This opens a 'Add Web Font' window. Go back to the CSS file and and copy the 'font family name' and paste it into the top box.

                   

                  7: Copy and paste the following code into the bottom box:

                  <link rel="stylesheet" href="Fonts/stylesheet.css" type="text/css" media="screen"/>

                   

                  8: Press add font and tah daa you have added your font.

                   

                  Hope that helps!!!

                  Chris

                  • 6. Re: @font-face not working in Firefox
                    mobly Level 3

                    Hi Chris

                    Excellent instructions!works very well, however doesn't solve the issues of the fonts working when the OAM is used in DPS

                    but much appreciated, as it will help with other things.

                     

                    Cheers

                    Alistair

                     

                    UPDATE

                    seems I had a buggy indesign file, I created a new page, added the OAM file (that uses @font-face) and the font now works on the iPad! ho hum, but glad it works

                    • 7. Re: @font-face not working in Firefox
                      Boerresen

                      Another way which is working for me is to separate the fonts

                       

                      @font-face {

                          font-family: MyFont; src: url('MyFont');

                      }

                      @font-face{

                          font-family: MyFont_IE; src: url('MyFont.eot');

                      }

                      @font-face{

                          font-family: MyFont_woof; src: url('MyFont.woof');

                      }

                      @font-face{

                          font-family: MyFont_svg; src: url('MyFont.svg');

                      }

                      @font-face{

                          font-family: MyFont_svg; src: url('MyFont.ttf');

                      }

                       

                      .TUIType{

                          font-family: MyFont, MyFont_IE, MyFont_woof, MyFont_svg, MyFont_ttf, Arial, Helvetica, sans-serif;

                      }

                       

                      Skærmbillede 2014-05-28 kl. 13.30.18.png

                       

                      Although... the thickness on the fonts can change from browser to browser.

                      I made some different thickness on the text in Edge Animate and they come out 400(normal)