WN - CSS ändra till ett annat teckensnitt.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS ändra till ett annat teckensnitt. (https://www.wn.se/forum/showthread.php?t=1051506)

mister

2011-12-19 10:49

CSS ändra till ett annat teckensnitt.

Hej behöver lite hjälp med css, såhär ser koden ut

Citat:

.widget-container {
background: url(images/banding.gif) repeat-x;
padding-top: 25px;
margin: 0 0 1.5em 0;
color: #1b6dd1;
font-family: "harabara";
src: url(http://www.xxxxx.se/font/harabara.tff) format("truetype");

Vart ligger felet? Har läst en guide på nätet och det ska ju vara så.

EDIT: Jag kör med wordpress hitta nyligen ett plugin som gör så man kan använda sig utav sIFR tydligen det enda sättet att använda sig utav custom font, återkommer med hur det går....

oskarh

2011-12-19 11:10

Customfonter är lite svårt att få till det i alla webbläsare. Har provat lite, men inte så extremt mycket. Google Font API tycker jag är smidigt, något du kanske kan kolla på. Finns en hel del fonter som är riktigt snygga där.

mister

2011-12-19 11:39

Citat:

Ursprungligen postat av oskarh (Inlägg 20427868)

Problemet är väl att jag redan har kört en font på allt annat, ingen idé å ändra hoppas jag får igång det bara ^^,

Plugin: http://wordpress.org/extend/plugins/.../installation/

Det är siFR de bästa skulle jag tro...

Nu ska jag bara konfigurera det rätt.

Wish me luck!!

allstars

2011-12-19 11:42

Kod:

@font-face {

    font-family: 'MySpecialFont';

    src: url('/wp-content/fonts/din-webfont.eot');

    src: url('/wp-content/fonts/din-webfont.eot?#iefix') format('embedded-opentype'),

         url('/wp-content/fonts/din-webfont.woff') format('woff'),

         url('/wp-content/fonts/din-webfont.ttf') format('truetype'),

         url('/wp-content/fonts/din-webfont.svg#MySpecialFont') format('svg');

    font-weight: normal;

    font-style: normal;

} /* Jag lägger in olika typer för ökad kompabilitet. Fick koden av någon generator på nätet */



h1 {font-family:'MySpecialFont', Arial, sans-serif;}

http://www.fontsquirrel.com/fontface/generator

mister

2011-12-19 11:53

Citat:

Ursprungligen postat av allstars (Inlägg 20427872)

Kod:

@font-face {

    font-family: 'MySpecialFont';

    src: url('/wp-content/fonts/din-webfont.eot');

    src: url('/wp-content/fonts/din-webfont.eot?#iefix') format('embedded-opentype'),

         url('/wp-content/fonts/din-webfont.woff') format('woff'),

         url('/wp-content/fonts/din-webfont.ttf') format('truetype'),

         url('/wp-content/fonts/din-webfont.svg#FuturaStdMedium') format('svg');

    font-weight: normal;

    font-style: normal;

} /* Jag lägger in olika typer för ökad kompabilitet. Fick koden av någon generator på nätet */



h1 {font-family:'MySpecialFont', Arial, sans-serif;}

Denna verkar enklare, ska testa den haha för detta pluginet går mig på nerverna vägrar funka som jag vill, ändrat en massa i config filerna men nej den vill inte....

Syke	2011-12-19 12:20

@font-face är definitivt att föredra om du inte har skriande behov av att det ska fungera i äldre webbläsare.

mister

2011-12-19 12:50

Citat:

.widget-container {
background: url(images/banding.gif) repeat-x;
padding-top: 25px;
margin: 0 0 1.5em 0;
color: #1b6dd1;
@font-face {
font-family: 'Harabara';
src: url('/wp-content/fonts/Harabara.eot');
src: url('/wp-content/fonts/Harabara.eot?#iefix') format('embedded-opentype'),
url('/wp-content/fonts/Harabara.woff') format('woff'),
url('/wp-content/fonts/Harabara.ttf') format('truetype'),
url('/wp-content/fonts/Harabara.svg#Harabara') format('svg');
font-weight: normal;
font-style: normal;
} /* Jag lägger in olika typer för ökad kompabilitet. Fick koden av någon generator på nätet */

h1 {font-family:'Harabara', Arial, sans-serif;}

}

Jag har konverterat alla filer via http://www.font2web.com/
Skrivit in css.en som bifogat här men funkar inte.

Nilsson

2011-12-19 13:02

@font-face är bäst

Jag har upplevt att det är noga med när man skapar .eot att man kopplar fonten mot just den webbsidan i alla förekommande stavningar man kommer att ha. Ett tips kanske?

Jag kör Microsofts eget WEFT. Funkar bra dock får man lägga till å,ä och ö och andra specialtecken i teckentabellen.

allstars

2011-12-19 13:06

Citat:

Ursprungligen postat av mister (Inlägg 20427880)

Jag har konverterat alla filer via http://www.font2web.com/
Skrivit in css.en som bifogat här men funkar inte.

Det är är riktigt fel.
Man ska deklarera font-face separat - helst först i css-filen
sedan använda det font-family-name man deklarerade i font-face.

Kod:

@font-face {

font-family: 'Harabara';

src: url('/wp-content/fonts/Harabara.eot');

src: url('/wp-content/fonts/Harabara.eot?#iefix') format('embedded-opentype'),

url('/wp-content/fonts/Harabara.woff') format('woff'),

url('/wp-content/fonts/Harabara.ttf') format('truetype'),

url('/wp-content/fonts/Harabara.svg#Harabara') format('svg');

font-weight: normal;

font-style: normal;

}



.widget-container {

background: url(images/banding.gif) repeat-x;

padding-top: 25px;

margin: 0 0 1.5em 0;

color: #1b6dd1;

font-family:'Harabara', Arial, sans-serif;

}

titta annars på den css du fick från font2web

mister

2011-12-19 13:13

Citat:

Ursprungligen postat av allstars (Inlägg 20427884)

Det är är riktigt fel.
Man ska deklarera font-face separat - helst först i css-filen
sedan använda det font-family-name man deklarerade i font-face.

Kod:

@font-face {

font-family: 'Harabara';

src: url('/wp-content/fonts/Harabara.eot');

src: url('/wp-content/fonts/Harabara.eot?#iefix') format('embedded-opentype'),

url('/wp-content/fonts/Harabara.woff') format('woff'),

url('/wp-content/fonts/Harabara.ttf') format('truetype'),

url('/wp-content/fonts/Harabara.svg#Harabara') format('svg');

font-weight: normal;

font-style: normal;

}



.widget-container {

background: url(images/banding.gif) repeat-x;

padding-top: 25px;

margin: 0 0 1.5em 0;

color: #1b6dd1;

font-family:'Harabara', Arial, sans-serif;

}

titta annars på den css du fick från font2web

HAHAHA, fyfan my bad där att jag missa dessa filer :( haha tack ska försöka med den information som finns där istället.

Alla tider är GMT +2. Klockan är nu 03:06.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida