Schriftart erzwingen ?!

Atath

Ich würde gerne wissen ob die Möglichkeit besteht eine Schriftart zu erzwingen, auch wenn sie nicht auf den jeweiligen Rechnern vorhanden ist.
zum Beispiel über das hochladen der Schrift auf den Server. damit die Schrift vom Server aus geladen werden kann.

Ich hatte mich hier schon mal durchgelesen, allerdings bin ich mir nicht sicher ob das heute noch funktioniert hier. Vielleicht wisst ihr ja einen Rat.

Hier ist die Seite und es geht um die Beitragsüberschriften.

Danke schon mal im Voraus

Atath :)

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Edi

Nein Schriften lassen sich immer nur vorschlagen, nicht erzwingen. Die Verwendung eines Fonts und seiner Eigenschaften (Grösse usw.) sind letztlich immer vom Browser abhängig.

Wenn eine Schrift "erzwungen" werden soll, in einem Logo beispielsweise, muss eine Bilddatei verwendet werden.

g3h

Du hast schon richtig gelegen mit @font-face. Damit kannst du eine Schriftart, die auf deinem Server liegt bereitstellen. Der Browser muss das allerdings unterstüzen, was aber bei allen neuen Browsern der Fall ist.
Die Schrift sieht dann auf jeden Rechner gleich aus.
Hier z.B. gibt es freie Schriften: http://www.fontsquirrel.com/

Eine alternative wäre auch Google-Fonts, damit machst du dich aber abhängig von Google und das will nicht jeder.

MfG

Edi

Zitat von g3h

Der Browser muss das allerdings unterstüzen, was aber bei allen neuen Browsern der Fall ist.

Er muss es nicht nur können, was aber mittlerweile eigentlich kein Problem mehr darstellt, vor allem muss er entsprechend konfiguriert sein. Jede Schrift und ihre Eigenschaften lassen sich lokal definieren und Vorgaben überschreiben. Erzwingen lässt sich nichts.

Atath

Ich danke euch beiden. Dann werde ich mich mal daran probieren mit @font-face :)

Atath

So recht will das grad nicht klappen:-(

Ich benutze WP 3.6.1 mit ElternTheme TwentyTen und ChildTheme.

Es geht um den unten stehenden Codebereich im Stylesheet (style.css)

Code

#content .entry-title {
background:url(images/icons/post_icon.png) no-repeat 1px;
background-position:3px 0;
color:#FFF8D6;
font-family:BIRTH OF A HERO, Arial, "Times New Roman", Times, serif;
font-size:32px;
line-height:1.1em;
padding-left:50px;
text-shadow:4px 4px 4px #000;
}


#content .entry-title a {
color:#FFF8D6;
font-family:BIRTH OF A HERO, "Times New Roman", Times, serif;
font-size:32px;
line-height:1.1em;
text-shadow:3px 3px 3px #000;
}

Alles anzeigen

WP-Theme.eu

Hm hm,

immer wieder diese Geschichten mit Schrift...

Hatte das gleiche Problem mit dem KUndensite vor paar Tagen.

Theoretisch muss es mit @font-face einwandfrei klappen: zuerst wird's auf dem System "geguckt", ob die Schriftart installiert worden ist und wenn nicht, dann wird die Schriftart vom Server (herunter)geladen. Soweit so gut, das ist aber Theorie, denn in Praxis sieht es irgendwie anders aus. Hier interessanter Beitrag diesbezüglich: http://www.mediaevent.de/css/font-face.html

Alternativ biete ich meinen Kunden an die Google Webfonts zu benutzen.

Für Wordpress gibt es auch ein tolles Plugin: http://wordpress.org/plugins/font-uploader/
MIt diesem klappt es auch ganz gut. Manko: insgesamt an 5-7 Stellen des Themes kann man die Schriften "manipulieren".

Gruß
RG

Edi

Versuche es einmal mit dem Font-Namen in Anführungszeichen, also "BIRTH OF A HERO".

WP-Theme.eu

Manchmal vergisst man auch die richtige Verlinkung: src: url('/fonts/fontname.otf');

Atath

so habe ich das jetzt allerdings tut sich nix

Code

#content .entry-title {
background:url(images/icons/post_icon.png) no-repeat 1px;
background-position:3px 0;
color:#FFF8D6;
  @font-face { font-family:BIRTH OF A HERO; src: url(http://blabla.net/BIRTH_OF_A_HERO.TTF); }
font-size:32px;
line-height:1.1em;
padding-left:50px;
text-shadow:4px 4px 4px #000;
}


#content .entry-title a {
color:#FFF8D6;
  @font-face { font-family:BIRTH OF A HERO; src: url(http://blabla.net/BIRTH_OF_A_HERO.TTF); }
font-size:32px;
line-height:1.1em;
text-shadow:3px 3px 3px #000;
}

Alles anzeigen

die ".." bei dem Schriftnamen sowie '..' bei der adresse bewirkt nix.

Atath

oder muss man .otf- bzw. .woff-Datein verwenden ?

Edi

@font-face muss am Anfang der CSS-Datei definiert werden. Beispielsweise so

@font-face {
font-family: 'BIRTH OF A HERO';
src: url('http://blabla.net/BIRTH_OF_A_HERO.TTF');
}

Um möglichst alle Browser zu bedienen, ist es ratsam, dass, wenn Du .ttf verwendest, Du auch .woff, .eot und .svg einbindest. Vgl. dazu:

http://webfonts.info/node/379

Atath

OK dann definier ichs mal.

gibt es eine möglichkeit aus einer .ttf-Datei eine .woff .eot und .svg zu machen ?

Da es die Schrift "BIRTH OF A HERO" nur in .ttf gibt

Melewo

Wenn Du einen Konverter findest.
Nicht dass ich die Dinger ausprobiert hätte.

http://www.kirsle.net/wizards/ttf2eot.cgi
http://www.konvertierung.org/font-converter.php

Atath

CSS

/*
Theme Name: EverlastingGloryTheme 
URI: http://everlasting-glory.5x.to
Description: A World of Warcraft Twenty Ten child theme.
Author: Atath Author url: http://everlasting-glory.5x.to
Version: 1.0
Tags: fixed-width, custom-header, theme-options, warcraft, game, cataclysm, blizzard
Template: twentyten
*/






@import url(../twentyten/style.css);


[COLOR=#ff0000]@font-face {
font-family:'BIRTH OF A HERO';
src:url('http://blabla.net/wordpress/BirthOfAHero.ttf');
}[/COLOR]


.excerpt-style p.read-more-text {
float:right;
margin-bottom:-5px!important;
padding-right:15px;
}


#col-1 .read-more-text,#col-2 .read-more-text {
margin-bottom:0;
}


.entry-content,.entry-summary {
clear:both;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:10px 0 0;
}


.comments-link {
background:url(images/icons/comment-1.png) no-repeat 1px;
background-color:transparent;
color:red!important;
padding-left:20px;
padding-top:1px;
}


[COLOR=#ff0000]#content .entry-title {
background:url(images/icons/post_icon.png) no-repeat 1px;
background-position:3px 0;
color:#FFF8D6;
    @font-face { font-family:BIRTH OF A HERO; src:url(http://blabla.net/wordpress/BirthOfAHero.ttf); }
font-size:32px;
line-height:1.1em;
padding-left:50px;
text-shadow:4px 4px 4px #000;
}[/COLOR]


[COLOR=#ff0000]#content .entry-title a {
color:#FFF8D6;
    @font-face { font-family:BIRTH OF A HERO; src:url(http://blabla.net/wordpress/BirthOfAHero.ttf); }
font-size:32px;
line-height:1.1em;
text-shadow:3px 3px 3px #000;
}[/COLOR]

Alles anzeigen

wäre das so richtig definiert ? es geht um die roten bereiche :P

Atath

Hey Hey Hey. Cool, ich habs hinbekommen :)

CSS

/*
Theme Name: EverlastingGloryTheme 
URI: http://everlasting-glory.5x.to
Description: A World of Warcraft Twenty Ten child theme.
Author: Atath Author url: http://everlasting-glory.5x.to
Version: 1.0
Tags: fixed-width, custom-header, theme-options, warcraft, game, cataclysm, blizzard
Template: twentyten
*/






@import url(../twentyten/style.css);


[COLOR=#ff0000]<style type="text/css">
@font-face {
 font-family: BIRTH OF A HERO;
 src: url('http://blabla.net/wordpress/BIRTH_OF_A_HERO.ttf')
}
@font-face {
 font-family: BIRTH OF A HERO;
 src: url('http://blabla.net/wordpress/BIRTH_OF_A_HERO.eot')
}
@font-face {
 font-family: BIRTH OF A HERO;
 src: url('http://blabla.net/wordpress/BIRTH_OF_A_HERO.svg')
}
@font-face {
 font-family: BIRTH OF A HERO;
 src: url('http://blabla.net/wordpress/BIRTH_OF_A_HERO.woff')
}
</style>[/COLOR]


.excerpt-style p.read-more-text {
float:right;
margin-bottom:-5px!important;
padding-right:15px;
}


#col-1 .read-more-text,#col-2 .read-more-text {
margin-bottom:0;
}


.entry-content,.entry-summary {
clear:both;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:10px 0 0;
}


.comments-link {
background:url(images/icons/comment-1.png) no-repeat 1px;
background-color:transparent;
color:red!important;
padding-left:20px;
padding-top:1px;
}


[COLOR=#ff0000]#content .entry-title {
background:url(images/icons/post_icon.png) no-repeat 1px;
background-position:3px 0;
color:#FFF8D6;
font-family: BIRTH OF A HERO;
font-size:32px;
line-height:1.1em;
padding-left:50px;
text-shadow:4px 4px 4px #000;
}


#content .entry-title a {
color:#FFF8D6;
font-family: BIRTH OF A HERO;
font-size:32px;
line-height:1.1em;
text-shadow:3px 3px 3px #000;
}[/COLOR]

Alles anzeigen

Danke euch allen :)

und jetzt probier ich mal die Navigations-Leiste in der schrift zu verändern :D

Atath

Durch das umwandeln der Schriftdateien sieht die Schrift an einigen Stellen sehr kantig aus :/

Melewo

Na ja, Du hast doch wohl nur Font normal eingebunden und bei Fonts müsstest Du doch auch noch Font in bold, italic und bolditalic einbinden. Das sind ja unterschiedliche Fonts, mal normal, mal fett, mal kursiv, mal fett und kursiv.

http://www.coder-welten.com/web-fonts-ersetzen/

Wenn es aber nur an den Konvertern liegt, was durchaus sein könnte, es gibt auch noch Font Editoren. Denke schon, dass man da erst einen Font anlegen könnte, um diesen dann unter verschiedenen Formaten zu speichern.
Hatte mal einen kostenlosen gefunden, sah mir nur zu anstrengend aus, mich da einzuarbeiten. Die anderen kosten wohl etwas, kenne jedoch die Preislagen nicht und da ich nicht vorhabe einen eigenen Font zu kreieren, hat es mich seither nicht mehr sonderlich interessiert.

Edi

"Birth of a hero" gibt es als Webfont unter

http://www.myfonts.com/fonts/cheappro…-of-a-hero-pro/

Im Übrigen müsstest Du unbedingt das Copyright beachten: Als .ttf ist der Font nur die private Verwendung kostenlos.

Und noch etwas: Den Font gibt es nur "Regular", also normal.

Atath

Hat alles geklappt. ich danke euch :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schriftart erzwingen ?!

Jetzt mitmachen!