Font Impact toevoegen aan Joomla site

Hoe kan ik het font Impact toevoegen aan een (Joomla 2.5) website.

Webfont genereren en met @font-face toevoegen aan je css. Of kijken of er bij google fonts een vergelijkbaar font is.

Ik heb een uitleg van een ontwikkelaar gekregen, wellicht kan het jou helpen.

1 - I recommend you to go here to create the font-face code for your new font.
2 - Unzip the package.
3 - Copy and paste the 4 format of fonts (eot, svg, ttf and woff) in the folder "CSS" of the template.
4 - Edit the CSS file of the font-face package. Copy and paste the code in the end of "css/template.css"
5 - In this code, copy the name of the font-family

Example for KellySlabRegular :

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

6 - Finally, you must edit the file "Templatedetails.xml" of the template and add this new option with the others font available.
Of course, you must use the same font-family name as the CSS file.

Ik weet natuurlijk niet hoe jouw .xml-bestand heet van de template. Dat zal je dus nog moeten uitzoeken.
Bovenstaande heeft mij wel geholpen bij een template van JoomSpirit.

Hou er overigens wel rekening mee dat bezoekers van de site die dit font niet hebben, de site met een heel ander lettertype te zien krijgen.

Edit Astrid: Ik heb de quote tussen tags geplaatst, volgende keer graag zelf doen.

Hallo David,

Bedankt voor je uitleg maar als ik op de link klik en dan klik op de knop "Add Fonts" dan kom ik in de map Windows - System32, maar in welke map staan dan de fonts.

@Astrid: sorry...
Font als zip bijgevoegd.

Zipje uitpakken en plaatsen volgens de instructie vanaf stap 3.

David bedankt voor het zip bestandje.

Ik ben verder gegaan vanaf stap 3 maar bij stap 6 kom ik er even niet uit. Als ik mijn Templatedetails.xml open dan kan ik daar geen andere fonts vinden, zoals is stap 6 wordt beschreven. Wel staat er in de index.php van de template het volgende:


Ik heb family=Offside veranderd in family=impactregular

Het gaat hier om een h3 regel en daar heb ik het volgende:


maar op de website krijg ik dan geen imact font tezien

Stap 6 is bedoeld als bij de instellingen van de template de mogelijkheid is om een bepaald font te kiezen.
Dan zet je dit font tussen de andere in het step-down menu.
Dus het lijkt mij dat dit niet voir jou van toepassing is, als ik jouw reactie zie.

Het kan ook een caching probleem zijn: cache van IE lerg maken, etc. en dan opnieuw proberen.

Een cache probleem is het blijkbaar niet. Maar ik denk dat ik bij stap 4 de fout ben ingegaan. bij stap 4 staat het volgende:


Ik heb nu de code "@font-face" in de CSS file styles.css van de template gezet, maar in stap 4 hebben zij het over CSS file of the font-face package. En dit CSS file kan ik nergens vinden in de template, het gaat om ijoomla01 template "Isonic". Hopelijk is iemand bekent met deze templates en kan mij hierbij verder helpen.

Het is gelukt om het fond type Impact te installeren in de template. (David bedankt voor je uitleg en zip bestand) Bij stap 4 in de uitleg van David staat dat echter moest ik de @font face code in de map bootstrap.css en bootstrap.min.css plaatsen.

Maar nu kwam ik een ander probleem tegen. In alle browsers wordt de fond "Impact" goed weergegeven echter in Firefox wordt deze fond niet weergegeven hoe kan dit.