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

    iWeb tutorial: Elk font gebruiken dat je wilt (incl. zichtbaarheid op Windows)

    Hallo,

    Welkom bij deze late-night tutorial. Omdat ik nu moe ben, ga ik er vlug doorheen, misschien edit ik het later nog eens om duidelijker te zijn. Ik doe het wel nu, omdat het hele proces nog vers in m’n hoofd zit. Je hebt wel basis HTML kennis nodig; maar schrik niet af, zelfs voor noobs is het te doen.

    Het probleem: Wanneer je een iWeb site gebruikt, en je gebruikt een font van je eigen keuze die niet onder de Windows supported fonts valt ziet je website er niet uit op Windows, wat vaak een belangrijke doelgroep kan zijn.
    De oplossing: Deze tutorial, tot op zekere hoogte, maar het resultaat geeft al voldoening van je werk.

    Let op: Om dit mogelijk te maken wordt gebruik gemaakt voor HTML5. Omdat ik zelf geen code n00b ben heb ik er uren over gedaan om dit geheel uit te zoeken. Je hoeft nergens bang voor te zijn; het HTML5 gedeelte hoef je vrijwel niets te doen.

    Eerst is er een belangrijke tool die je nodig hebt: Fontforge (Download). Installeer Fontforge. Het programma installeert zich in de programma map en wordt geopend in een X11 omgeving. Het programma is nogal lelijk.

    Zoek het font (fonts: later meer) dat je gebruikt in iWeb in: Library/Fonts. Mocht het daar niet bij staan, dan is de kans aanwezig dat je het font later zelf hebt geinstalleerd. Kijk dan in je thuismap/Library/Fonts.
    __________
    Belangrijk is dat je font eindigt op .ttf of .otf. Ik heb het zelf alleen getest met een .ttf font, en dat werkte prima. Mocht je font een ander bestandsformaat hebben, zoek dan op google of je het kunt converteren
    __________

    Kopieer het font even naar je bureaublad. Open het font met Fontforge; je ziet nu zoiets:

    Ga naar Encoding -> Compact. Selecteer nu alle vreemde karakters die je nooit zult gebruiken (klik de muis op 1 karakter en sleep de muis naar rechtsonder) en druk rechtermuisknop->CLEAR. Deze karakters worden nu uit het font verwijderd. Ga nu naar Encoding->Reencode->

    Ga nu naar Element -> Font info -> TTF Names. Je ziet nu zoiets:

    Waarschijnlijk is het lijstje onder de rode velden iets langer en bestaat het uit meerdere talen. Verwijder alles van die talen, tot je bij de onderste rode setting komt. Hoe je dat moet doen vind je in DEZE VIDEO. Vanaf 03:58.
    Kijk de video af, en volg alle stappen die worden genomen. Als het goed is neemt de video je mee door het proces waarin je DRIE nieuwe settings toevoegt (de settings die bij mij in het bovenstaande plaatje onder de laatste rode setting staan) en de video neemt je mee in het proces waarin je het font opslaat als een .ttf font, truetype.

    Als je meerdere fonts gebruikt (dus ook de dikgedrukte versie van je font; die telt als een apart font) is nu het moment gekomen om voor deze fonts alle bovenstaande stappen te herhalen, tot je met Fontforge de file opslaat als .ttf, truetype.

    Vanaf hier wordt het een stuk gemakkelijker; met name door één website in het specifiek.
    Deze Website. De file(s) die je net met Fontforge hebt opgeslagen upload je hier op deze website, en je selecteert na het uploaden ‘download your kit’. Er begint nu een .zip file te downloaden die je moet uitpakken tot er een map overblijft. Kopieer deze map even naar je bureaublad en hernoem de map naar ‘fonts’.

    Deze map fonts kun je direct naar je domein uploaden, in de Public-HTML map. Upload vanuit iWeb je website ook naar je domein. Zorg nu dat je een FTP programma hebt. Zelf gebruik ik Flow om mijn FTP server te managen.

    Wat je misschien gemerkt hebt is dat de map ‘fonts’ die je net in public html hebt gezet een file bevat, genaamd ‘stylesheet.css’. Deze file is van essentieel belang, want deze zorgt ervoor dat de speciale fonts die jij gebruikt worden geinstalleerd door de browser van de kijker van je website, dit is een geautomatiseerd proces. Het enige wat je hiervoor moet doen is elke pagina van je iWebsite linken naar deze CSS file.

    Ga naar je FTP programma, en zorg dat je in de map zit waar je iWebsite staat. Druk met je rechtermuisknop op een pagina file van je site (bijvoorbeeld home.html, of overons.html, of fotos.html) en kijk of je ergens de optie ‘bewerk’ of ‘edit’ ziet. Als je deze kunt selecteren opent de desbetreffende HTML file in een bepaald programma, of een HTML editor van jouw keuze (dat is met Flow mogelijk).
    In die HTML file zie je in regel 13 de volgende regel staan:

    <link rel="stylesheet" type="text/css" media="screen,print" href="jouwpagina_files/jouwpagina.css" />

    Deze regel is essentieel. We moeten namelijk onze file, ‘stylesheet.css’ uit de map fonts, linken aan iedere pagina. In deze regel wordt de pagina gelinkt aan zijn eigen CSS file.
    KOPIEER deze regel en plak hem in regel 14 (de regel eronder).

    Pas deze regel aan naar de locatie van je stylesheet file. Indien je fonts map op de root (in de public html) pagina staat, zal de regel er zo uit komen te zien:

    <link rel="stylesheet" type="text/css" media="screen,print" href="fonts/stylesheet.css" />

    Het gedeelte achter ‘href’ verwijst naar de file stylesheet.css. als de map fonts dus nog in een andere map staat wordt de link iets als: href=”anderemap/fonts/stylesheet.css”

    Als het goed is ziet je code er nu ongeveer zo uit:

    (let vooral op de twee onderste regels, 13 en 14)

    Sla de file op. Als het goed is word de file automatisch bijgewerkt op de server van je website.
    Herhaal dit kopieer en vervang gedeelte nu voor iedere pagina die je in iWeb hebt, kwestie van hooguit 5 minuten werk. Als je je iWeb site update en opnieuw upload moet je wel steeds deze regel 14 opnieuw toevoegen! De map fonts kun je gewoon laten staan, mits je geen fonts hebt veranderd in iWeb.

    Check de desbetreffende pagina in Windows (wel in een HTML5 browser) en als het goed is ziet het er een stuk beter uit, én het is futureproof.

    En wat was nou het HTML5 gedeelte? Dat vind je als je stylesheet.css (in de fonts map) opent. Indrukwekkend he :slant: )

    Als je vragen hebt, stuur me dan een PM.

    Julian

    Geblokkeerd
    Anoniem

    Dit is allemaal wel een beetje moeilijk. Ik heb ook nog een manier:

    1. Zoek een willekeurige foto op Google
    2. Kopieer die naar het bureaublad
    3. Open de foto in Voorvertoning
    4. Druk ‘Command + A’ in en daarna ‘Command + X’
    5. Daarna sla het bestand op en open het opnieuw.
    6. Ga nu direct naar Extra’s > Annoteer > Voeg tekst toe
    7. Typ je tekst en sla hem opnieuw op.
    8. Als het goed is slaat hij hem nu op als .png-bestand
    9. Schuif hem naar iWeb en je hebt een ”Lettertypefoto”;)

    Alleen het nadeel van deze truc is, dat als je héél veel tekst hebt, gaat het een beetje moeilijk. Dan is de methode van Lexis beter.

    Geblokkeerd
    Anoniem

    Deze file is van essentieel belang, want deze zorgt ervoor dat de speciale fonts die jij gebruikt worden geinstalleerd door de browser van de kijker van je website, dit is een geautomatiseerd proces.

    Waarmee jij plotseling copyrighted materialen van derden verspreid, waar jij geen recht toe hebt. Gefeliciteerd, als het font dat je gebruikt veel geld heeft gekost heb je nog eens kans op een rechtszaak.

    Bijdrager
    Ir.Bob
    cailin op 13 augustus 2010

    Waarmee jij plotseling copyrighted materialen van derden verspreid, waar jij geen recht toe hebt.

    Dat hangt maar net van de EULA van het font af. Zoals vele fonts embed mogen worden in PDFs, mogen fonts (afhankelijk van EULA) ook op een website embed worden…

    Bijdrager
    Ir.Bob
    rainiervanes1 op 13 augustus 2010

    Alleen het nadeel van deze truc is, dat als je héél veel tekst hebt, gaat het een beetje moeilijk. Dan is de methode van Lexis beter.

    Een ander (behoorlijk groot) nadeel van deze truc is dat een bezoeker geen tekst kan kopiëren die op jouw website staat.

    Geblokkeerd
    Anoniem

    @ Ir.Bob:
    Goed punt. Had ik niet bij stil gestaan.

    Bijdrager
    Ree

    waarom niet gewoon bijvoorbeeld sifr, flir, cufon of @fontface gebruiken?

    Bijdrager
    Lexis

    Dit is @fontface…, je wordt zelfs doorgestuurd naar Fontsquirrel.com…
    De eerste stappen zijn om het font te verkleinen…

    Bijdrager
    Lexis
    cailin op 13 augustus 2010

    Deze file is van essentieel belang, want deze zorgt ervoor dat de speciale fonts die jij gebruikt worden geinstalleerd door de browser van de kijker van je website, dit is een geautomatiseerd proces.

    Waarmee jij plotseling copyrighted materialen van derden verspreid, waar jij geen recht toe hebt. Gefeliciteerd, als het font dat je gebruikt veel geld heeft gekost heb je nog eens kans op een rechtszaak.

    Wat Bob zegt, het hangt van je licenties af.

    Bijdrager
    Wyodor

    Eerste mogelijkheid :

    Doe Command-Shift-G in de Finder en plak deze regel :

    /Applications/iWeb.app/Contents/Resources/

    Open bestand FontMapping.plist in the Property List Editor of in een plaintext editor.

    Je kan nu de combinaties van Mac/Windows fonts aanpassen.

    Tweede mogelijkheid :

    Creeer je eigen stylesheet zoals uitgelegd. Maar i.p.v. de pagina na publiceren steeds te moeten wijzigen kan je een Javascript in een HTML Snippet gebruiken om de Stylesheet aan de pagina toe te voegen :

    <script language="JavaScript" type="text/javascript"><br />
    <!--<br />
    var cssNode = parent.document.createElement('link');<br />
    cssNode.type = 'text/css';<br />
    cssNode.rel = 'stylesheet';<br />
    cssNode.href = '../duckmenu/duckassets/duckmenu.css';<br />
    cssNode.media = 'screen';<br />
    headID.appendChild(cssNode);<br />
    // --><br />
    </script>

    Je kan de stylesheet ook gebruiken om de pagina zelf aan te passen zoals dit :

    http://broddel.atspace.com/global/Blank.html
    http://www.wyodor.net/_Demo/Fancy/Dynamic_Text.html

    Bijdrager
    Lexis

    @Wyodor
    Die eerste mogelijkheid werkt niet altijd even goed in iWeb…

    De tweede mogelijkheid ga ik even bekijken, thanks!
    *Inmiddels bekeken

    Dus het stukje code dat je noemt, pas je aan zodat de Href naar jouw bepaalde stylesheet verwijst. Vervolgens voeg je een HTML snippet in in iedere pagina met dit stukje Javascript code waardoor de iWeb pagina automatisch na publiceren naar je Font stylesheet zoekt..?

    Bijdrager
    Wyodor

    De script in de HTML Snippet is eenmalig.

    Het brengt de stylesheet code in the <head> van de pagina aan. Wat je nu met de hand doet.

    Je hoeft dus niet steeds je pagina’s aan te passen.

    Mijn stylesheet gebruik ik om een font te wijzingen in het menu.

    http://broddel.atspace.com/wyo_css.css

    Je moet wel de Class kennen om het aan te passen. Dat geld ook voor tekst op de pagina. iWeb noemt het meestal de paragraph_style

    Op een PC werkt het zoals te doen gebruikelijk niet met MSIE.

    Mijn streven is om met zo weinig mogelijk werk zoveel mogelijk resultaat te bereiken.

    Ik gebruik JavaScripts om Google Analytics, films, menus, fancyzoom aan iWeb pagina toe te voegen zonder iets aan de iWeb pagina te wiijzigen.

    Je kan mij en anderen volgen in Apple Discussions waar dit dagelijks aan de orde is.

    En over HTML5 gesproken :

    http://www.wyodor.net/_Demo/html5/BlowUp.html
    http://ipad.dailynews.webege.com/BlowUp.html

    Het vergt iets meer inspanning dan een font wijzigen.

    Bijdrager
    Lexis

    Oke, dan heb ik nog één vraag. Ik moet namelijk ook steeds achteraf de Google Analytics code toepassen.
    Hoe ziet het Javascript daarvoor eruit?

    Edit: Gevonden op de discussions site. Zelfs in een topic waar jij het antwoord op geeft. Thanks man! Topwerk!

    Bijdrager
    Wyodor

    Eerst een vervolg op mijn eerdere post:)

    Hier een pagina met een embedded font (Adler) in een externe stylesheet.

    http://broddel.atspace.com/global/Adler.html

    Om het contrast te laten zien heb ik in de fontmapping.plist het Adler font opgenomen met als Windows alternatief Comis Sans MS Sans-serif. Het Adler font moet wel op de Mac geinstalleerd zijn. Je moet het tenslotte kunnen kiezen als je de tekst opmaakt.

    <key>Adler</key><br />
    	<dict><br />
    		<key>Generic</key><br />
    		<string>sans-serif</string><br />
    		<key>Image</key><br />
    		<false/><br />
    		<key>Windows</key><br />
    		<string>Comic Sans MS</string><br />
    	</dict>

    Als iWeb de pagina publiceert zal in de paragraph Class dit staan :

    font-family: Adler, 'Comic Sans MS', sans-serif;

    Met Windows zullen MSIE en Flock Comic Sans tonen, Safari en Firefox het Adler font.

    Dit is het bestand met de HTML Snippet. Bekijk de bronscode.

    http://broddel.atspace.com/global//Adler_files/widget1_markup.html

    Het gebruikt dezelfde stylesheet als de andere pagina. De code om het navigatiemenu aan te passen heb ik weggelaten, Net als het menu zelf.

    Bijdrager
    Wyodor

    Foutje in de post en de hele pagina hangt in Safari.

    Gelukkig kunnen herstellen met Seamonkey.

    Anyway, hier de uitleg over Google Analytics in iWeb :

    http://www.wyodor.net/blog/archives/2010/05/entry_316.html

    Bijdrager
    Lexis

    Ah oke, dat scheelt; ik zag het ook al, zag er raar uit!

    Bijdrager
    Lexis

    Oke, jouw blog is echt heel handig. Ik ga het doorlezen!
    Echt top werk man; analytics werkt nu al als een gek.

    Ditzelfde truukje kan vast ook met Metatags en Paginatitels (voor bovenaan de browser)…
    Ik ga t even uitzoeken!

    Bijdrager
    Wyodor

    Even een kleine aanvulling.

    De style sheet wordt, met een vertraging, aan het einde van de <body> toegevoegd en niet in de <head>.

    Het is al weer enige tijd geleden, dus ik moest even verzinnen waarom maar de reden is dat anders niet de style wordt overschreven.

    De volgorde in de DOM maakt uit op welk moment de style wordt uitgevoerd.

    Eerst moet de browser de complete pagina volledig renderen en vervolgens worden de aangepaste stylen uitgevoerd.

    Het is niet direct vanzelfsprekend op het eerste gezicht.

    Bijdrager
    Wyodor

    Hier de uitleg hoe titles in iWeb werken. Vanochtend nog beantwoord in Discussions :

    When you add a page to your project, iWeb uses the text in the large textbox in the Header layer (do Command-Shift-L to see the layers) as the title in the browser bar.

    If that textbox is missing, iWeb uses the next textbox down the page.

    If that one is missing too, it uses the name of the page in the Sidebar.

    You cannot replace the textbox in the header. It has to be the one that came with the template.

    You can force the textbox back by choosing a new template from the menu at the bottom of the window and then change it back to your former template.

    It may ruin your design.

    In case you do not want the text in the textbox appear on the page but only in the browser title bar, select the textbox, do Command-T and click the color next to the T.

    In the Color palette drag the Opacity slider to 0 (zero).

    Change the font size by dragging the slider down.

    Resize the textbox.

    Duplicate the textbox and reverse the opacity and fontsize of that duplicate to its original state.

    Move the first textbox out of view and re-position the duplicate textbox.

    You now have an invisible textbox for the title and a visible one for the text on the page.

    Bijdrager
    Lexis

    Ik heb nog een vraag over het script dat naar je lettertype CSS verwijst.

    Op een gegeven moment staat er dit:

    cssNode.href = '../duckmenu/duckassets/duckmenu.css';

    Bij mij is dat:

    cssNode.href = 'fonts/stylesheet.css';

    De vraag: dat ‘..’ die jij gebruikt, is die verplicht, of heb je die met een ander doeleind neergezet?

    Bijdrager
    Wyodor

    Ook daar heb ik een antwoord op. Count the dots :

    Using the iWeb HTML Snippet

    Heb erg dat ../../../ is om te ontsnappen uit de Site map vanuit het widget-markup bestand en ../ is om te ontsnappen van de pagina waarin het bestand wordt ingevoegd.

    Het is een bug in iWeb dat niet ../../ wordt gebruikt.

    Maar het is te zeer ingevoerd om het te wijzingen door Apple anders werkt een hoop niet meer.

    Bijdrager
    Lexis

    In principe staat bijvoorbeeld home.html bij mij in dezelfde directory als de map fonts, dus ik hoef geen directory omhoog…
    Edit: Onee, want de code van de widget staat in widget_markup.html.

    Nice! Echt superhandig dit! Ik ga vaker in de Apple Discussions kijken!

    Bijdrager
    Wyodor

    Het vergt enige hersengymnastiek om vooraf te bepalen waar wat uiteindelijk eindigt.

    Open altijd het Aktiviteiten venster in Safari, Command-Option(Alt)-A, om te zien waar Safari de bestanden wil ophalen. Zo kan je dan de padnamen aanpassen.

    Bijdrager
    Lexis

    Jap! Nog één vraagje over de titels.
    Ik begin namelijk altijd met een wit design, en verwijder alles op de pagina (dus ook het belangrijke tekstboxje). Ik bouw dan heel m’n design op (uit vormen en dergelijke) en dan is het ongeveer klaar.

    Nu heb ik de betreffende pagina gedupliceerd, en het origineel heb ik het thema veranderd naar Zwart. Het tekstboxje verschijnt weer, en deze heb ik geheel aangepast. Ik heb het design op de originele pagina vervangen door het design op het duplicaat (m’n hele lay-out was inderdaad geruineerd).

    Echter, het tekstboxje blijft in de koptekst staan, en ik heb geen koptekst, waardoor mijn hele pagina alsnog ongeveeer 10-15 pixels omlaag wordt geforceerd. Kan dit tekstvakje niet ook buiten de koptekst staan?

    Bijdrager
    Wyodor

    Als je alles verwijdert moet je dat ene textveld toch laten staan. Dat wijzig je dan zoals ik eerder uitlegde.

    Als er toch een textveld blijft staan kan je de Header waarde op nul zetten in de Inspector.

    Dit is het JavaScript om de titel in de browser aan te passen.

    <script language="JavaScript"><br />
    parent.document.title = "titel in de browser titelbalk" ;<br />
    </script>
    Bijdrager
    computer space

    Gewoon iWeb 1.0 gebruiken. Die maakt van ieder niet standaard font een dikke PNG. Werkt altijd, ook op retrobrowsers als Netscape 7.

    Bijdrager
    Lexis

    Oke, inmiddels was het @Font-Face gedeelte helemaal klaar, maar ik heb het op een iPad kunnen testen, alsook op Internet Explorer, en op beiden wordt de website weergegeven in Times New Roman.

    De vraag is nu, waarom is het niet gelukt, en mocht het nooit gaan lukken, kan ik dan ook niet kiezen dat er een ander sans-serif font wordt gekozen, want met Serif is de website nogal lelijk.

    Bijdrager
    Wyodor

    MSIE en de iPad ondersteunen geen embedded fonts.

    Je moet dus fonts gebruiken die op beide voorkomen en zonodig de fontmapping.plist aanpassen.

    Hier het lijstje met fonts die op de iPhone/iPad voorkomen :

    http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/

    Bijdrager
    Lexis

    Ik maak gebruik van Eurostile, die klaarblijkelijk niet wordt ondersteund; dat is balen, want het font paste perfect op m’n site.

    Weet je misschien wel hoe ik in de CSS file kan toevoegen dat de browser dan automatisch een sans-serif font moet kiezen ipv een Serif lettertype?

    Ik heb de gehele fontmapping.plist aangepast (eurostile staat er niet tussen, maar heb ik ertussen gezet (geen idee of dat zin heeft), en als het goed is wordt er nu bij elk lettertype sans-serif gekozen maar ik zie het niet terug, daarom wilde ik het direct in de CSS van m’n site aanpassen (misschien dat het kan in dezelfde CSS als die van Font-Face.

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

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