5 Replies Latest reply on Aug 23, 2017 3:25 AM by PizzaPasta

    Adobe Webfonts in https-Site

    PizzaPasta Level 1

      Hallo

      Meine Site ist eine https-Site (https://www.mysite.com).

      Ich möchte einen Stapel mit Adobe Edge Web Fonts erstelle und diesen auf der Site verwenden.

      Dann wird ein script in den head eingefügt, welches wie folgt heisst:

      <script>var __adobewebfontsappname__="dreamweaver"</script>

      <script src="http://use.edgefonts.net/muli:n3:default;source-sans-pro:n3:default;lato:n3:default;josefin-sans: n6:default.js" type="text/javascript"></script>

      Das ergibt für die Site einen mixed-content, wenn ich diese hochlade.

      Und mixed-content wird in Google Chrome und im Internet Explorer blockiert, sodass nur die "Fallback-Schrift" verwendet wird, im konkreten Fall einfach "sans-serif".

      Meine Fragen:

      • Kann ich den script-code einfach auf https:// ändern?
      • Wenn nein, was muss ich tun?
      • Bei google webfonts werden die Hauptschriftarten ebenfalls angeboten - ich habe aber Schwierigkeiten, einen Schriftstapel herzustellen.
        Das Script beginnt mit https:// - das wäre also gut.
      • Dieses Script lautet:
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Muli" rel="stylesheet">
        Bei der Überprüfung
        durch W3C kommt dann eine Fehlermeldung, weil zwischen den beiden Schriftarten ein senkrechter Strich geschrieben wird und das nicht erlaubt sei.

      Kann mir jemand in dieser Angelegenheit weiter helfen?

      Technische Informationen: DW CC2017, Windows 7 Professional

      Vielen Dank im voraus sagt

      MS

        • 1. Re: Adobe Webfonts in https-Site
          pziecina Adobe Community Professional

          Serving edge fonts via https is shown in the protocol section of the document from typekit -

          http://www.edgefonts.com/help

           

          For the Google fonts problem, i would simply ignore it as even though it is being shown as an error, it is the recommended method, you could if you wish to 'fix' the error make 2 seperate links to the individual font files.

          • 2. Re: Adobe Webfonts in https-Site
            BenPleysier Adobe Community Professional & MVP

            Please copy and paste the following into a new document and see if that works.

             

            <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <script>var __adobewebfontsappname__="dreamweaver"</script>
            <script src="http://use.edgefonts.net/muli:n3:default;source-sans-pro:n3:default;lato:n3:default;josefin-sans: n6:default.js" type="text/javascript"></script>
            <style>
            * {
            margin: 0;
            padding: 0;
            border: none;
            min-width: 100%;
            font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
            }
            .josefin {
            font-family: "josefin-sans";
            }
            header {
            height: 500px;
            background-color: purple;
            color: white;
            }
            header h1 {
            font-size: 6em;
            padding-bottom: 10px;
            word-spacing: normal;
            text-align: center;
            position: relative;
            top: 40%;
            transform: translateY(-50%);
            }
            header p {
            font-size: 2.5em;
            text-align: center;
            position: relative;
            top: 40%;
            transform: translateY(-50%);
            }
            </style>
            </head>
            
            
            <body>
              <header>
                  <h1 class="josefin">Website Title</h1>
                  <p> Authentic  |  Relatable  |  Content</p>
              </header>
            </body>
            </html>
            
            • 3. Re: Adobe Webfonts in https-Site
              PizzaPasta Level 1

              Thank you psiecina for your information.

              The link you noted for webfonts is very interesting. So it seems to be recommended to note the code with http:// and it will work also with a site in https://

              I hope it will work when my site will be uploaded again.

              I will tell it to you and if it does, I will mark the answer as the right one.

              • 4. Re: Adobe Webfonts in https-Site
                PizzaPasta Level 1

                Thank you Ben

                your answer is very interesting.

                What I did in my site is exactly what you wrote - or to be correct: using the webfont panel DW writes the scripts automatically in the code.

                 

                My question is, if the code you noted will work also in a site which is https:// because the code is noted in http://

                I uploaded a site but Google Chrome and Internet Explorer didn't show it in the right way, only with the default font sans serif - so the typography is not the one i intended. Mixed content seems to be the problem what means that in a  https://-site are informations in http://-code.

                I am working the site again and try it again, following your suggestion and those of psiecina.

                You will read from me if it works or not.

                • 5. Re: Adobe Webfonts in https-Site
                  PizzaPasta Level 1

                  Hello Ben, hello psiecina

                  As promised I tell you about my experiences whith webfonts:

                  1. I added the code for the Adobe webfonts as I did before and as you, Ben, noted in your code example.
                  2. I defined the site as a https-site in the site menu.
                  3. After uploading the site, it was correct in Firefox and Internet Explorer, the typography was as determined. But in Google Chrome, it didn't work.
                  4. So I changed the code for the Adobe webfonts into <script src="https://use.edgefonts.net/muli:n4,n3:default;source-sans-pro:n4,n3:default;lato:n4,n3:default;j osefin-sans:n1,n4:default.js" type="text/javascript"></script>
                  5. And now it works as intended.

                  Thanks to both of you, I appreciate your support!

                  1 person found this helpful