Skip to main content
P
PizzaPasta
Inspiring
August 17, 2017
Question

Adobe Webfonts in https-Site

  • August 17, 2017
  • 2 replies
  • 1402 views

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

This topic has been closed for replies.

2 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
August 18, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
P
PizzaPastaAuthor
Inspiring
August 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.

P
PizzaPastaAuthor
Inspiring
August 23, 2017

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;josefin-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!

pziecina
pziecina
Legend
August 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.

P
PizzaPastaAuthor
Inspiring
August 18, 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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices