Adobe Webfonts in https-Site

Report · Aug 17, 2017

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:

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

Report · Aug 17, 2017

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.

Report · Aug 17, 2017

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.

Report · Aug 17, 2017

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>

Wappler, the only real Dreamweaver alternative.

Report · Aug 18, 2017

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.

Report · Aug 23, 2017

Hello Ben, hello psiecina

As promised I tell you about my experiences whith webfonts:

I added the code for the Adobe webfonts as I did before and as you, Ben, noted in your code example.
I defined the site as a https-site in the site menu.
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.
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;josefin-sans:n1,n4:default.js" type="text/javascript"></script>
And now it works as intended.

Thanks to both of you, I appreciate your support!

Adobe Community

Adobe Webfonts in https-Site