3 Replies Latest reply on Jun 12, 2013 4:03 AM by mobly

    any advice on web fonts..

    mobly Level 3

      I've encountered another project where my web fonts just stop working and revert to another random font.

      I'm importing the project into DPS, and I'm getting the promlem with both the html file and the OAM.

      I appreciate this is a very vague post, but are there any know issues, or workarounds, anyone else have issues with fonts defaulting to something else?

       

      cheers

      Alistair

        • 1. Re: any advice on web fonts..
          mobly Level 3

          Don't all rush at once...

          I think I remember someone saying they weren't sure whether webfonts worked with indesign/DPS, and I'm beging to think they may be right!

          so perhaps the clue is in the word "web" in webfonts.

          I thought that the font onfo would be embedded into the .OAM file or the web folder with the index.html file, but now I'm not so sure, I couldn'y see anything obvious. Can anyone clarify?

          I'll post this in the DPS forum too.

           

          Any (sensible) reply would be most welcome :-)

           

          Cheers

          Alistair

           

          Update

          Yep, webfonts don't work locally, so looking at injecting the html text with css stying that refers to a local font that is loaded with @font-face

          • 2. Re: any advice on web fonts..
            mobly Level 3

            If I had a brain, I would be dangerous, well at least a brain with a memory...

            see this from last October, that I had forgotten about.

             

            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

            • 3. Re: any advice on web fonts..
              mobly Level 3

              just another note on this, whan you have your fonts folder in the project folder, and publish it for web, the fonts folder does not get copied to the Web folder, so you have to copy the font folder into it as well.

              Is this a bug? or just a limitation, could this get fixed, it's almost essential for DPS work when using live fonts, which is important to cover off std and retina screens.

              Cheers

              Alistair

              1 person found this helpful