Forum : SVG Font-face

Réponse acceptée

:) oui...
si ta font n'est pas standard il faut impérativement l'importer à ton projet, cad qu'elle sera télécharger sur le client.
utilise ce kit

après, réfléchis bien car les font sont de gros fichiers... (tout est relatif)

si tu n'as que quelques caractères à utiliser utilise les png à différentes échelles pour un bon rendu responsive....

AlexJM

Auteur

Réponse acceptée

Bon anyway, j'ai reformulé ma recherche et selon http://stackoverflow.com/questions/30466610/svg-doesnt-use-font-when-inside-html , il faut mettre la police en base64 directement dans le svg. Or, je charge 2 fois le svg, donc c'est un peu dommage mais bon, il faut ce qu'il faut. Si jamais quelqu'un à une autre technique, je prends ! Merci pour ton aide, grâce au site que tu m'as donné on peut mettre la police en base64 dans le style :)

saibe

hum, tu parles d'une font svg et tu charges une ttf ? c normal ?

AlexJM

Auteur

J'ai une image svg avec du texte, ce texte a une police spécifique qui est en ttf. Et je n'arrive pas à charger cette police :/

saibe

excuse, je crois avoir mal compris :
tu as un svg (en données xml) qui contient une font, et tu veux utiliser cette font dans ton htm, c ça ?

saibe

si c le cas, il faut que tu importes ta font.... (obligé)

AlexJM

Auteur

Je vais essayer de bien m'expliquer, dans mon svg j'ai :
<text x="266.706px" y="541.695px" style="font-family:'EdoSZ', 'Edo SZ';font-size:144px;fill:none;">Du texte</text>
Or, EdoSZ n'est pas une police installée sur les ordis, donc j'ai ajouté :

<defs>
    <style type="text/css">
        @font-face {
            font-family: 'EdoSZ';
            src: url(edosz.ttf);
        }
    </style>
</defs>

Dedans, pour charger la police, mais ça ne fonctionne qu'à moitié : dans ma balise img, ça ne fonctionne pas, mais si je fais clic-droit => ouvrir dans un nouvel onglet sur l'image, dans le nouvel onglet elle aura la police

J'espère avoir été clair ^^'

AlexJM

Auteur

Ca donne la même chose :/ Quand je regarde l'image directement dans l'url ça fonctionne mais une fois dans la page ça ne fonctionne plus :/

La seule solution que j'ai trouvé c'est d'inclure les svg directement, mais ça j'aimerais éviter

saibe

hum, tu génères un kit expert avec tous modèles de la font (ttf, woff, eot, svg) ?

saibe

et tu as bien modifié ton css pour qu'il fasse appel à tout ça ?

saibe

tu utilises quel navigateur ?

regarde la compatibilité ici

AlexJM

Auteur

Oui et j'ai désactivé les caches & il n'y a pas d'erreur 404 sur aucun fichier

saibe

??? t'aurais un svg a partager ?

saibe

celui de ton logo par exemple ? :))

saibe

histoire que je comprenne mieux le soucis....

AlexJM

Auteur

Voilà, https://alexvanvliet.be/tests/svgs/ je t'ai mis le logo en png, donc ce que ça doit donner au dessus, et le logo en svg en dessous. Qui plus est, j'ai appliqué la police au paragraphes, pour montrer qu'elle se charge bien

En tous cas merci beaucoup de ton aide :)

Et pour les navigateurs, j'ai testé avec chrome et safari

saibe

hum... ton svg contient du text (2x, qui plus est) et le 'svg xlm' de ton text....
je comprends plus rien :
si tu veux juste du text formaté avec ta font : pas besoin de 'svg xml'....
si tu veux le 'svg xml' de ton text tu l'as déjà....

comment tu as créé ce svg ?

saibe

en fait tu veux pouvoir créer un svg avec du text formaté avec ta font.
en gros, en reprenant ton code après nettoyage :

<svg width="100%" height="100%" viewBox="0 0 785 184" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
  <g transform="matrix(1,0,0,1,-235.198,-411.554)">
    <text x="266.706px" y="541.695px" style="font-family:'EdoSZ', 'Edo SZ';font-size:144px;fill:none;">
        La Cravate
    </text>
  </g>
</svg>

et "cravate" typé edosz.
c ça ?

AlexJM

Auteur

Ouip c'est normal qu'il le contienne deux fois c'est pour donner un effet qu'il n'y a pas avec la fonte

Je veux appliquer une police à un texte dans le svg, en chargeant la police

Via affinity designer

Edit : oui, c'est ça

saibe

ok, tente ça (avec ta ttf dans le même dir) :

<svg width="100%" height="100%" viewBox="0 0 785 184" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<defs> 
 <style type="text/css">
    @font-face {
      font-family: EdoSZ;
      src: url('edosz.ttf');
    }
  </style>
</defs>
<g>
<text style="font-family:'EdoSZ';font-size:144px;">
La Cravate
</text>
</g>
</svg>

sans le fill:none

saibe

sorry, j'avais pas vu que ct résolu....

AlexJM

Auteur

Pas de pbs, je teste quand même parce que la solution trouvée ne me conviens pas, elle me fait charger 2 fois la police, pour rien

Pour une raison inconnue le texte s'affiche même plus :/

saibe

tiens, un truc rigolo :

<body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100px" width="500px">
            <defs> 
             <style type="text/css">
                @font-face {
                  font-family: EdoSZ;
                  src: url('edosz.ttf');
                }

              </style>
               <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="2 2" result="shadow"/><feOffset dx="6" dy="6"/></filter>
            </defs>
            <g>
            <text style="filter: url(#shadow); fill: black; font-family: EdoSZ; font-size:50px;" x="1" y="50">
    La Cravate
    </text><text x="1" y="50" style="fill: white;font-family: EdoSZ; font-size:50px;">
    La Cravate
    </text>
            </g>
        </svg>

</body>

je viens de comprendre l'intérêt des 2 text :)

AlexJM

Auteur

Aha oui c'est pour faire des effets pas mal :)

SVG Font-face

24 réponses