Einbinden von Schriften in DirectSmile Cross Media Webseiten / Embedding Fonts in DirectSmile Cross Media Webpages

Letztens kam die Frage auf wie man hauseigene Fonts, beziehungsweise Fonts eines Auftraggebers, für das Web im DirectSmile Cross Media bereitstellen kann, so dass für alle Besucher der Webseite die gleiche Typografie dargestellt wird.

Um einen TTF oder OTF Font für das Web vorzubereiten muss dieser im ersten Schritt in ein brauchbares Format konvertiert werden. Die gängigsten Formate sind Web Open Font Format (WOFF), Embedded Open Type (EOT) und Scalable Vector Graphics (SVG).

Für das Konvertieren der Fonts habe ich folgenden @font-face Generator benutzt:

http://www.fontsquirrel.com/fontface/generator

Stellen Sie sicher, dass Sie keine Urheberrechtsverletzung begehen, wenn Sie Schriften einbinden.

Wählen Sie einen Font aus und laden Sie die Datei hoch. Nach Bestätigung der Vereinbarung wird der Font in alle gängigen Webformate konvertiert und Ihnen als Download angeboten.

 

Nach dem Herunterladen und Entpacken der Zip Datei importieren Sie die Fonts in Ihre DirectSmile Cross Media Kampagne über den Bereich Content, Auswahl Account.

imageBild1

Um auf jeder Seite Ihrer Kampagne auf das Stylesheet zugreifen zu können, empfiehlt es sich den Style für die Kampagne im Head fest zu hinterlegen. Dazu öffnen Sie den Editor für den Head-Bereich. Diesen finden Sie im Menü Campaign und wählen HTML head.

imageBild2

Bevor Sie den Style einfügen, definieren Sie den Bereich für CSS-Format. Mit <style type=“text/css“> und </style> definieren Sie einen Bereich für die Stylesheet-Formatdefinitionen.
Zwischen dem einleitenden Tag <style...> und dem abschließenden Tag </style> können Sie nun Ihre CSS-Formate definieren. Kopieren Sie den Code aus der Stylesheet.css Datei und fügen ihn ein. Passen Sie den Pfad an, damit der Font beim Aufruf gefunden werden kann. Geben Sie der Font-Family einen Namen und bestätigen Sie die Anpassungen mit OK.

imageBild3

Erstellen Sie einen Stil im Bereich Styles (Bild4) um Ihren Items später dieses CSS zuweisen zu können. Dazu editieren Sie den hinzugefügten Style und ändern den font-family Namen in Example (Bild5), wie in Bild3 definiert.

imageBild4 imageBild5

Platzieren Sie ein beliebiges Layout Item auf Ihrer Seite, indem Sie mit gedrückter Maustaste das Item in die noch leere Baumstruktur (Tree) ziehen.

imageBild6

Selektieren Sie das platzierte Item im Tree und wählen den neuen Style aus. Nun wird der hinterlegte Font automatisch auf Ihrer Seite angezeigt.

imageBild7

 

 

Embedding Fonts in DirectSmile Cross Media Webpages

We recently received a question on how one can make their own in house fonts, respectively fonts from a client, available for the web in DirectSmile Cross Media so that the same typography is presented for all visitors of the webpage.

In order to prepare a TTF or OTF font for the web, it must first be converted into a usable format. The most common formats are the Web Open Font Format (WOFF), Embedded Open Type (EOT), and Scalable Vector Graphics (SVG).

In order to convert the fonts I used the following @font-face Generator:

http://www.fontsquirrel.com/fontface/generator

Make sure that you are not committing copyright infringement when embedding the font.

Select a font and upload the file. After the agreement of terms has been confirmed, the font will be converted into all common formats and be available to you as a download.

 

After you have imported and unpacked the ZIP file, import the fonts in your DirectSmile Cross Media campaign by selecting Account in the Content area.

clip_image001Image 1

In order to access the style sheet on every page in your campaign, it is recommended that you set the style for the campaign in the Head. To do so, open the editor for the Head area. This is located in the Campaign menu under the selection HTML Head.

clip_image002Image 2

Before you insert the style, define the area for the CSS format. With <style type=“text/css“> and </style> you define an area for the style sheet format definitions.
Between the opening tag <style...> and the final tag </style> you can define your CSS formats. Copy the code from the Stylesheet.css file and insert it. Modify the path so that the font may be found when requested. Give the font family a name and confirm the modifications by clicking OK.

clip_image003Image 3

Create a style in the ‘Styles’ area (Image 4) in order to be able to allot your items to this CSS later. Edit the added style and change the font family names to Example (Image 5) as defined in Image 3.

clip_image004Image 4 clip_image005Image 5

Place any layout item on your page by dragging the item onto the empty Tree while pressing the mouse button.

clip_image006Image 6

Select the item that was placed in the Tree and select the new style. Now the added font will automatically be displayed on your page.

clip_image007Image 7

Werbeanzeigen