4 Replies Latest reply on Jan 24, 2013 7:29 AM by catia mendonca

    Getting the fallback list and embed code of Fonts in my computer

    catia mendonca

      Can anyone help me with this please. I want to add the all family of Helvetica into Edge, but i need the code and don´t know how to get it. Thanks

        • 1. Re: Getting the fallback list and embed code of Fonts in my computer
          pmfr01 Level 2

          Hi there.

          With your Helvetica files:

           

          1. Convert them to Web using an online converter like Font2Web - you'll have to do it one file at a time though;

           

          2. The site will generate all the files you need including the css ones - gather all the css files code and compile them into a single CSS file; it will look something like this:

              @font-face {

                  font-family: 'Helvetica-Normal';

                  src: url('fonts/Helvetica.eot');

                  src: url('fonts/Helvetica.woff') format('woff'),

                       url('fonts/Helvetica.ttf') format('truetype'),

                       url('fonts/Helveticasvg') format('svg');

                  font-weight: normal;

                  font-style: normal;

              }

              This code for all the variations - normal, bold, italic, ect.

           

          3. Reference the CSS code in your Edge project, in the Fonts panel - add new font: in Font Fallback List insert something like;

              'Helvetica - normal', sans-serif

              in Embed Code insert the following code

              < link rel="yourStylesheet.css" href="css/website_CCVA_Figueira_da_Foz_FONTS.css" type="text/css"

              Take in consideration the name and path of your CSS file.

           

          That's it.

          If you need help with this, just yeal.

           

          pmfr

          • 3. Re: Getting the fallback list and embed code of Fonts in my computer
            pmfr01 Level 2

            I had some errors on my sintax. Here's the correct one:

             

            in Embed Code

            < link rel="stylesheet" href="css/fonts.css" type="text/css" >


            in Font Fallback List

            'Helvetica-Normal', sans-serif

             

            Notice that the name between quotes - 'Helvetica-Normal' - must be the same as refered in the css file in font-family:

            @font-face {

                font-family: 'Helvetica-Normal';

                src: url('../fonts/Helvetica.eot');

                src: local('☺'), url('../fonts/Helvetica.woff') format('woff'),

                     url('../fonts/Helvetica.ttf') format('truetype'),

                     url('../fonts/Helvetica.svg') format('svg');

                font-weight: normal;

                font-style: normal;

            }

             

            In this case I have my fonts in the 'fonts' folder and my css file - fonts.css -  in the "css" folder.

             

            pmfr

            • 4. Re: Getting the fallback list and embed code of Fonts in my computer
              catia mendonca Level 1

              I found out with edge tutorial

              But thank you anyway. It was a precious help!