6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    zwiep

    @font-face doet vreemd

    Er is op dit forum al een en ander over gezegd, maar wat ik lees helpt mij niet verder.

    Mijn probleem is dat werken met font-face de ene keer wel goed gaat en de andere keer niet. Hieronder staat een bestandje met drie gedeclareerde fonts. Er is een p-tag en een h3-tag. Als ik fonts daar invul komen ze de ene keer wel in beeld en de andere keer niet. Nu heb ik er geen verstand van dus de code kan fout zijn. Graag een aanwijzing (mijn hele weekend zit al in het proberen dit goed te krijgen).

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en”><head>

    <title>Font-face</title>

    <style type=”text/css” media=”all”>

    @font-face {
    font-family: ‘CopseRegular’;
    src: url(‘Copse-Regular-webfont.eot’);
    src: url(‘Copse-Regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘Copse-Regular-webfont.woff’) format(‘woff’),
    url(‘Copse-Regular-webfont.ttf’) format(‘truetype’),
    url(‘Copse-Regular-webfont.svg#CopseRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: ‘NewsCycle’;
    src: url(‘NewsCycle-Regular-webfont.eot’);
    src: url(‘NewsCycle-Regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘NewsCycle-Regular-webfont.woff’) format(‘woff’),
    url(‘NewsCycle-Regular-webfont.ttf’) format(‘truetype’),
    url(‘NewsCycle-Regular-webfont.svg#NewsCycleRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: ‘JosefinSansStdLight’;
    src: url(‘JosefinSansStd-Light-webfont.eot’);
    src: url(‘JosefinSansStd-Light-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘JosefinSansStd-Light-webfont.woff’) format(‘woff’),
    url(‘JosefinSansStd-Light-webfont.ttf’) format(‘truetype’),
    url(‘JosefinSansStd-Light-webfont.svg#JosefinSansStdLight’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    body {
    font-size: 12px;
    }

    p {
    font-size: 2em;
    line-height: 1.5em;
    }

    p {
    font-family: NewsCycle, sans-serif;
    margin-top: 10;
    text-align: justify;
    letter-spacing: 5px;
    color: #555753;
    }

    h3 {
    font-family: CopseRegular, sans-serif;
    font-size: 3EM;
    letter-spacing: 0px;
    margin-top: 10;
    margin-bottom: 0;
    color: #7D775C;
    font-style: normal;
    }

    </style>

    </head>

    <body>
    <h3><b>Dit is een kop</b></h3>
    <p>en dit is platte tekst met al zijn nukken, marges, ruimtes en andere ongerechtighed</p>
    </body></html>

    Bijdrager
    rebbx

    Je maakt ze aan tussen quotes, font-family: ‘CopseRegular’;
    JE roept ze aan zonder quotes, font-family: CopseRegular, sans-serif;

    Zet het eens tussen quotes, daarbij gebeurt dit bij alle browsers?

    Bijdrager
    zwiep

    De declaratie komt rechtstreeks van de @font-face kits van fontsquirrel. Aanroepen doe je absoluut zonder quotes, alleen bij samengestelde namen zet je ze tussen quotes. ‘Times New Roman’

    Heb het wel even geprobeerd maar dat geeft geen oplossing.

    Ik probeer het in Safari en Firefox.

    Bedankt in ieder geval voor het meedenken.

    Inactief
    Anoniem

    Moet het niet zijn:

    <br />
    url('NewsCycle-Regular-webfont.svg#NewsCycle') format('svg');<br />
     

    in plaats van:

    <br />
    url('NewsCycle-Regular-webfont.svg#NewsCycleRegular') format('svg');<br />
     

    Probeer anders eens alle tags met een type font te gebruiken, dus allemaal bv NewsCycle. Misschien is een van je fonts corrupt.

    Bijdrager
    zwiep

    Twee van de drie fonts doen het vaak. CopseRegular, die het eerst deed, doet het helemaal niet meer.

    Ik ga het met andere fonts proberen. Kijken of ik daar meer succes mee heb.

    Bedankt voor je moeite.

    Bijdrager
    zwiep

    Na lang testen: het geheim zit in het font! Sommige doen het, andere niet.

    Dat ik in het begin wisselend resultaat had lag waarschijnlijk aan gefiedel met de code.

    Koen: je opmerking over de naamgeving van NewsCycle was correct.

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.