Ondersteuning » Thema en CSS/opmaak » font in svg plaatje werkt niet goed

  • Opgelost wbt24

    (@wbt24)


    Hallo,

    Ik hoop dat iemand me hier kan helpen. Heeft niet specifiek met WordPress te maken, maar ik loop tegen het volgende aan:

    Ik heb een logo gemaakt in Illustrator en als .svg-bestand opgeslagen.
    Dat heb ik geplaatst op mijn site, maar op mobiele apparaten wordt het niet goed weergegeven. Op desk-/laptop wel.

    Het gaat hierom: http://tweehuijsenwebdesign.nl/test

    Het plaatje daar is niet mis mee, maar het gaat om de tekst en het lettertype waar dat in is gemaakt. Op mobiel wordt namelijk niet het lettertype weergegeven waar het in is gemaakt en opgeslagen, bekijk het maar eens op desk-/laptop en vergelijk met hoe het op telefoon/tablet eruit ziet.

    Nu is dat ook wel eens vaker het geval bij platte tekst en dan is het meestal een kwestie van de font bestanden uploaden naar de server en via css @font-face met de font-family aanspreken.
    Maar met het svg logo wil het maar niet lukken.
    Nu heb ik het lettertype ook als webfont en svg opgeslagen en geüpload en dat ook in mijn css gezet (heb meerdere malen gelezen dat het zo zou moeten lukken), maar ik krijg het maar niet voor elkaar.
    Kan iemand met misschien hiermee helpen?

    Mijn css is:

    @font-face {
        font-family: 'onyx';
        src: url('/wp-includes/fonts/onyx/onyx-webfont.eot');
        src: url('/wp-includes/fonts/onyx/onyx-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-includes/fonts/onyx/onyx-webfont.woff2') format('woff2'),
             url('/wp-includes/fonts/onyx/onyx-webfont.woff') format('woff'),
             url('/wp-includes/fonts/onyx/onyx-webfont.ttf') format('truetype'),
             url('/wp-includes/fonts/onyx/onyx-webfont.svg#onyx') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    Ik hoop dat het duidelijk is en misschien zit ik helemaal verkeerd, maar ik zou dit erg graag voor elkaar krijgen. Ben er al een paar dagen mee bezig… 🙁

    Alvast bedankt!

    Wouter

1 reactie aan het bekijken (van in totaal 1)
  • Thread starter wbt24

    (@wbt24)

    Antwoord is inmiddels gevonden.
    Had toch niets met css te maken. Svg opslaan met text als outlines (of omtrekken) heeft het gefixt.

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘font in svg plaatje werkt niet goed’ is gesloten voor nieuwe reacties.