Heidi API



  • html5 compliant

  • Saas API

  • Cross-Browser

Qu’est-ce que c’est ?

Heidi repose d’une part, sur un ensemble de services web disponibles dans notre Cloud, et d’autre part sur un client web pour la personnalisation des produits.

Si les services web suffisent à concevoir un outil dédié à la personnalisation, son implémentation s’en trouve grandement facilitée par l’utilisation du client web. Un client natif à Android et IOS est d'ailleurs en cours de développement.

Pourquoi utiliser l’API ?

Utiliser l’API d’Heidi peut se justifier de bien des façons. Si Heidi offre une implémentation pour Prestashop, l’API va permettre aux développeurs d’utiliser Heidi ailleurs.

Les versions ci-dessus sont par exemple bâties sur l’API.
Ensuite, utilisez votre propre implémentation vous permettra de proposer une interface et une expérience utilisateur adaptée à votre métier et à votre catalogue produits.

Webservices SaaS

readAcrossDevices.png

Nos services reposent sur une architecture puissante et largement capable de supporter une montée en charge importante. Ils mettent à disposition un ensemble de services accessibles à tout moment, de n’importe où, et utilisable dans n’importe quel projet.

Les applications web sont les premières à en profiter mais pas seulement. Les clients lourds pour Windows, MacOS, ou Linux, les applications mobiles Android et IOS, mais aussi les applications à interfaces tangibles ou immersives comme Kinect et les GoogleGlass, peuvent également en profiter.

Les Bases

Interroger nos WebServices : 

Les WebServices de Sakura permettent de contrôler l’ensemble du workflow de création de personnalisation.
Il est ainsi possible de lister, consulter, créer, et supprimer des “Patrons” (Pattern) ou des ‘personnalisations’  (CustomerDesign).

La documentation de cette API est disponible ici : http://storage.sakuradesigner.microclimat.com/server/api/classes/API.html

Exemple Ajax

Pour faire un appel au service RemovePattern en Ajax avec JQuery.

function testApi() {
   var sendData = {
       'RequestHeader': {
           'Token': 'abs5d1eczefze54564zefds',
           'Locale': 'fr_FR'
       },
       'RequestBody': {
           'PatternId': '1347442992974'
       }
   };
   $.ajax({
       type: "POST",
       data: JSON.stringify(sendData),
       url: "http://sakuradesigner.microclimat.com/Api.svc /RemovePattern",
       contentType: "application/json; charset=utf-8",
       dataType: "json"
   }).done(removePattern_CompleteHandler).fail(service_ErrorHandler);
}

Construire une requête

Les échanges avec l’API se font au format JSON.
Elles sont toutes construites de la même façon, avec un header (RequestHeader) et un body (RequestBody).

{
    'RequestHeader': {
        'Token': 'abs5d1eczefze54564zefds',
        'Locale': 'fr_FR'
    },
    'RequestBody': {
        
    }
}

Le RequestHeader contient le Token qui vous a été donné, pour autoriser l'accès à l’API.
Locale n’est pas utilisée est doit toujours être ‘fr_FR’.
Le RequestBody contient le message propre à la requête et est donc spécifique à chaque WebService.

La réponse se fait elle aussi au format JSON et comporte un ResponseHeader en plus du message de retour.

{
    'ResponseHeader': {
        'ErrorCode': '0',
        'Message': ''
    },
    ... }

Elle contient un code de retour et éventuellement le message associé.

1 = Success

2 = WrongPassword

3 = UnknownApplication

4 = InsufficientPermissions

5 = UnknowPattern

6 = TechnicalError

7 = UnknownAlbum

8 = UnknownPicture

9 = UnknownProduct

10 = UnknownPurpose

11 = UnknownUser

12 = NullParameter

13 = UnknownSite

14 = UnknownPurposeCategory

15 = UnknownPartner

16 = UnauthorizedActionPartnerException

17 = UnknownCustomerDesign

18 = BuildHDError

19 = BuildHDInProgress

20 = NullPatternBackground

21 = RestoreThumbInProgress

22 = RestoreThumbError

23 = BuildHDNotDemanded

24 = NumberHDExceeded

Afficher un patron

Afficher un patron dans une page web est relativement simple.
Pour commencer il faut charger le module javascript.

<script src="http://storage.sakuradesigner.microclimat.com/apps/html5/js/release/heidi.js"></script>

Vous devez ensuite prévoir la DIV qui va recevoir Heidi

<div id="editorCreationDiv" style="width: 100%;height: 100%"></div>

Injectez la structure html qui va être utilisée pour l'interface de l'outil

<div id="heidi">
    <div id="heidi_notification_popup"></div>
    <div id="heidi_freezer"></div>
    <div id="heidi_gallery"></div>
    <div id="heidi_menu"></div>
    <div id="heidi_editor"></div>
    <div id="heidi_external_gallery"></div>
    <div id="fb-root"></div>
</div>

Ensuite, lorsque la page a terminé de se charger, vous pouvez créer une nouvelle instance du module de personnalisation Heidi.

document.ready = function () {
    var HeidiConfig = {
        token: '44921aa4af2c478193ce57a1e2b85ec5',
        configURL: 'http://storage.sakuradesigner.microclimat.com/apps/html5/config.xml',
        imagesURL: 'images/heidi',
        host: 'prod',
        editorCreationDiv: 'editorCreationDiv',
        logLevel:0,
        isCustomerDesign:false,
        isLogged:true,
        layoutURL:'http://
storage.sakuradesigner.microclimat.com/apps/html5/layouts.xml',
        patternId: '764083',
        availableFonts:["toto","tata"]
    };

    Heidi.getInstance().init(HeidiConfig);
};

La doc de l’API du module indique la fonction de chaque paramètre.

http://storage.sakuradesigner.microclimat.com/apps/api/classes/Heidi.html

Le modèle de données est visible ici http://preprod.storage.plume.microclimat.com/apps/api/model/

  • targetElementID String = l’ID de la DIV où creer le designer
  • token String = Le token sécurisé
  • configFile String = Url du fichier de configuration admin à utiliser
  • patternID String = ( Optionnel )L’ID du patron à utiliser dans le cas d’une modification d’un patron existant

Le token est celui que nous vous avons communiqué pour utiliser l’API.
Si vous n’en disposez pas merci de nous contacter à l'adresse suivante : contact@heidi-module-personnalisation.com
Veuillez nous laisser vos ; nom, prénom, coordonnées, la techno et l'url de votre site. 

Configurer le module de personnalisation

Pour s’afficher, le module à besoin d’être configuré.
Pour cela nous allons lui indiquer l’emplacement du fichier XML qui contient l’ensemble des directives nécessaires.

<parameters>
   <preloader applicationName="SakuraJS" urlLogo="*">
       <init name="init" type="com.sakura.config.EditorConfig">
           <properties value="skin.xml?cacheKiller=41548" name="url" ref="SkinLoader"/>
           <properties value="locale/fr_FR/ihm.properties" name="urlPattern" ref="LanguageLoader"/>
           <properties value="fr_FR" name="defaultLocale" ref="LanguageLoader"/>
           <properties value="Sakura.Service.Pattern.PatternService" name="patternServiceSource" ref="RemoteParameter"/>
           <properties value="fluorine" name="destination" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/Gateway.aspx" name="endpoint" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/Api.svc" name="jsonEndpoint" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/designer/ShareInstagramAuth.html" name="instagramRedirectionURL"
                       ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/upload.aspx" name="uploadDestination" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/ExternalAssetProxy.aspx" name="externalAssetsProxy" ref="RemoteParameter"/>
           <properties value="4" name="externalAssetsPrice" ref="RemoteParameter"/>
       </init>
   </preloader>
   <skin name='default'>
       <color id='areaBorder'>#d6d6d6</color>
       <color id='areaHighlight'>rgba(50,160,200,0.25)</color>
       <color id='areaHighlightBorder'>#32A0C8</color>
       <color id='windowBorder'>#FF0000</color>
       <image id='rotateIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/rotateIcon.png</image>
       <image id='closeIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/closeIcon.png</image>
       <image id='moveIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/moveIcon.png</image>
       <image id='resizeIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/resizeIcon.png</image>
       <property id='displayBackground'>false</property>
       <property id='patternDisplayMode'>static</property>
       <property id='displayTemplateThumbs'>false</property>
       <property id='keepPictureQuality'>true</property>
       <property id='keepAspectRatio'>true</property>
       <property id='move'>true</property>
       <property id='rotate'>true</property>
       <property id='scale'>true</property>
        <propertyid='delete'>true</property>       
        <property id='displayAreaBorder'>false</property>
       <property id='swapPictures'>true</property>
       <property id='useNextTransformIcon'>true</property>
       <property id='isTextEditable'>true</property>
       
<size id='maxPictureByArea'>8</size> <size id='borderSize'>2</size>
   </skin>
</parameters>

Les couleurs

  • les couleurs supportent le format hexa #FFFF00 et RGBA rgba(255,255,0,0)
  • areaBorder : la couleur du contour d'une zone lorsqu'un élément est sélectionné
  • areaHighlight : la couleur de la zone lors d'un rollover
  • areaHighlightBorder : idem mais pour le contour

Les images

  • rotateIcon : L'icône de rotation d'un élément
  • closeIcon : L'icône de suppression d'un élément

Les propriétés

  • displayBackground : si l'on affiche le fond ou s'il est transparent
  • keepPictureQuality: lors de l'import d'une image si keepPictureQuality est à true, l'image apparaîtra au maximum de sa résolution.
  • Ainsi, une image de 250x250 dans une zone de 500x500 apparaitra sans remplir la zone.
  • keepAspectRatio : active ou non le scale non homothétique
  • move : active ou non le déplacement
  • rotate: active ou non la rotation
  • scale: active ou non l’étirement
  • delete : active ou non la suppression
  • displayAreaBorder : à true, la bordure des zones est constamment visible
  • swapPictures : lors d'un changement de zone, indique si l'on permute avec un élément de la zone de destination
  • maxPictureByArea : indique le nombre maximum d'images que peuvent contenir les zones.
  • 0 -> illimité
  • Si l'on ajoute une image à une zone qui ne peut pas en contenir d'autres, nous supprimons la précédente.
  • Si swapPictures est à true, on ne supprime rien.

Exemple complet

Un exemple complet d’intégration est disponible ici :

http://storage.sakuradesigner.microclimat.com/apps/html5/heidi.html

Typographies supportées par l'API

                @font-face {
                        src:url("/fonts/Satisfy-Regular.ttf");
                        fontFamily:"Satisfy";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Rancho-Regular.ttf");
                        fontFamily:"Rancho";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/ChopinScript.ttf");
                        fontFamily:"ChopinScript";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }



                @font-face {
                        src:url("/fonts/Comfortaa-Regular.ttf");
                        fontFamily: Comfortaa;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/Comfortaa-Bold.ttf");
                        fontFamily: Comfortaa;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/Comfortaa-Light.ttf");
                        fontFamily: Comfortaa;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                        fontWeight: bold;
                        fontStyle:light;


                }


                @font-face {
                        src:url("/fonts/PatrickHand-Regular.ttf");
                        fontFamily:"Patrick Hand";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/amatic-sc.bold.ttf");
                        fontFamily:"Amatic SC Bold";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Sacramento-Regular.ttf");
                        fontFamily:"Sacramento";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Allura-Regular.ttf");
                        fontFamily:"Allura";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/EuphoriaScript-Regular.ttf");
                        fontFamily:"Euphoria Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Courgette-Regular.ttf");
                        fontFamily:"Courgette Regular";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/DK-Lemon-Yellow-Sun.otf");
                        fontFamily:"DKLemonYellowSun";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/OleoScriptSwashCaps-Regular.ttf");
                        fontFamily:"Oleo Script Swash Caps";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/AmaticSC-Regular.ttf");
                        fontFamily:"Amatic SC Regular";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Boogaloo-Regular.ttf");
                        fontFamily:"Boogaloo";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/DroidSans-Bold.ttf");
                        fontFamily:"Droid Sans Bold";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Lobster-Regular.ttf");
                        fontFamily:"Lobster";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }


                @font-face {
                        src:url("/fonts/PatuaOne-Regular.otf");
                        fontFamily:"PatuaOne";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/AvenirLTStd-Book.otf");
                        fontFamily:"AvenirLTStd";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }


                @font-face {
                        src:url("/fonts/GochiHand-Regular.ttf");
                        fontFamily:"Gochi Hand";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/IndieFlower.ttf");
                        fontFamily:"Indie Flower";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/RougeScript.ttf");
                        fontFamily:"Rouge Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/AmaticSC.ttf");
                        fontFamily:"Amatic SC";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Marvel.ttf");
                        fontFamily:"Marvel";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/PinyonScript.ttf");
                        fontFamily:"Pinyon Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/NixieOne.ttf");
                        fontFamily:"Nixie One";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/CraftyGirls.ttf");
                        fontFamily:"Crafty Girls";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Monofett.ttf");
                        fontFamily:"Monofett";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Bangers.ttf");
                        fontFamily:"Bangers";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Rye.ttf");
                        fontFamily:"Rye";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/alamain.ttf");
                        fontFamily:"alamain";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/Pinyon-Script.ttf");
                        fontFamily: "Pinyon Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/Cabin-Bold.ttf");
                        fontFamily: "Cabin Sketch";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                        fontWeight:bold;

                }

                @font-face {
                        src:url("/fonts/Cabin.ttf");
                        fontFamily: "Cabin Sketch";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Blackout.ttf");
                        fontFamily: Blackout;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Billabong.ttf");
                        fontFamily: Billabong;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }




                @font-face {
                        src:url("/fonts/varsity_regular.ttf");
                        fontFamily: varsity_regular;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/fffwc2014.ttf");
                        fontFamily: fff_wc2014;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/helveticaneue.otf");
                        fontFamily: helvetica;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/BebasNeue-webfont.ttf");
                        fontFamily: bebas_neueregular;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Typewriter-Regular.ttf");
                        fontFamily: typewriter;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/College.ttf");
                        fontFamily: college;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/ChalkDust.ttf");
                        fontFamily: chalkDust;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }


                @font-face {
                        src:url("/fonts/AvantQue.ttf");
                        fontFamily: avantque;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }


                @font-face {
                        src:url("/fonts/HoboStd.otf");
                        fontFamily: hobo;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/StencilStd.otf");
                        fontFamily: stencil;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/impact.ttf");
                        fontFamily: impact;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/YanoneKaffeesatz-Bold.ttf");
                        fontFamily: "Yanone Kaffeesatz";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/GARA.ttf");
                        fontFamily: garamond;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/GARABI.ttf");
                        fontFamily: garamond;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                        fontWeight: bold;
                        fontStyle:italic;


                }

                @font-face {
                        src:url("/fonts/GARABD.ttf");
                        fontFamily: garamond;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/GARAIT.ttf");
                        fontFamily: garamond;
                        fontWeight: normal;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/times.ttf");
                        fontFamily: times;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/timesbd.ttf");
                        fontFamily: times;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/timesi.ttf");
                        fontFamily: times;
                        fontWeight: normal;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/timesbi.ttf");
                        fontFamily: times;
                        fontWeight: bold;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }


                @font-face {
                        src:url("/fonts/arial.ttf");
                        fontFamily: arial;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/arialbd.ttf");
                        fontFamily: arial;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/ariali.ttf");
                        fontFamily: arial;
                        fontWeight: normal;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/arialbi.ttf");
                        fontFamily: arial;
                        fontWeight: bold;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdana.ttf");
                        fontFamily: Verdana;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdanab.ttf");
                        fontFamily: Verdana;
                        fontWeight: bold;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdanai.ttf");
                        fontFamily: Verdana;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdanaz.ttf");
                        fontFamily: Verdana;
                        fontWeight: bold;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/ArialRounded.ttf");
                        fontFamily: ArialRounded;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Bauhaus.ttf");
                        fontFamily: Bauhaus;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Copperplate.otf");
                        fontFamily: Copperplate;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/harrington.ttf");
                        fontFamily: harrington;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/segoe_print.ttf");
                        fontFamily: segoe_print;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/That_s_Font_Folks.ttf");
                        fontFamily: That_s_Font_Folks;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/vladimir.ttf");
                        fontFamily: vladimir;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Yearbook.ttf");
                        fontFamily: Yearbook;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }