Tagged: @font-face Toggle Comment Threads | Keyboard Shortcuts

  • betty 10:41 am on February 28, 2013 Permalink | Flag unresolved

      Tags: @font-face,   

      @font-face Einbindung bei Baylys funktioniert nicht … 

      Hallo,
      bin schon am Verzeifeln. Habe schon alles mögliche probiert und das Web befragt. Hoffe ihr könnt mir helfen!

      Ich möchte die freie Icon-Schrift socialicoregular über @font-face im Theme Baylys einbinden.
      Habe die Schrift in den unterchiedlichen Formaten in einem extra Ordner im Theme mit Namen fonts gelegt.

      In der style.css habe ich folgendes: (More …)

       
      • dave 5:20 pm on February 28, 2013 Permalink | Log in to Reply

        hi!
        versuch mal, die url zu den schriften absolut zu setzen (http://deinesomain/etc
        hth
        dave

        • betty 9:21 pm on February 28, 2013 Permalink | Log in to Reply

          Danke für deinen Tipp. Habe ich gerade versucht – funktioniert leider aber auch nicht :((
          Woran kann das wohl liegen ???

        • betty 10:07 am on March 1, 2013 Permalink | Log in to Reply

          Danke für deinen Tipp. Habe ich gerade ausprobiert, funktioniert aber leider nicht :((
          Woran kann es nur liegen?

          Liebe Grüße, Betty

          • dave 3:19 pm on March 4, 2013 Permalink | Log in to Reply

            hm.
            die @import -anweisung ist die erste Anweisung im style.css?

            hab auch schon bemerkt, dass – komischerweise – die URL case-sensitiv scheint (?).
            und manchmal ist es schwierig, durch die vielen css-anweisungen der liquid-designs durchzukommen – du hast deine anweisungen schon am richtigen ort platziert (wahrscheinlich im bereich für desktops oder tablets –

            @media screen and (min-width: 768px)
                {
                    div.deinstyle {
                    lalala
                }
            }
            

            oder weiter unten?

            obwohl das !important ja alles überfahren müsste.

            mach mal ein test-html, und reduzier die anweisungen auf je ein format (soff/ttf etc), dann ist es übersichtlicher… (das ist jeweils mein approach…)

    • dave 5:21 pm on February 15, 2013 Permalink | Flag unresolved

        Tags: @font-face, , ,   

        Gesucht: clevere Typo-Kontrolle 

        Ouch!
        beim rumpfriemeln an meinem Baylys-Child, ist mir ein grosser wunsch entstanden:
        Ein plugin (?), welches in bestehenden WP-Installationen dynamisch die Font-faces ersetzt, inklusive den Attributen
        {
        font-weight: bold;
        font-style: italic;
        }

        die entsprechend durch

        {
        font-family: ‘meinFont-Italic’;
        font-weight: normal;
        font-style: normal;
        }

        ersetzen täte…
        Geht das überhaupt? Nur mit CSS wohl nicht, oder?

         
        • markus 5:48 pm on February 15, 2013 Permalink | Log in to Reply

          ja, das interessiert mich auch! habe bis jetzt immer die css angepasst.

        • Ellen 8:40 pm on February 16, 2013 Permalink | Log in to Reply

          @dave , @markus: Es gibt einige WordPress-Plugins, die dies können. Ich bin allerdings nicht 100% auf dem Laufenden, welches Plugin aktuell das Beste ist.

          Vielleicht hat ein anderer User einen Tipp?

          Anschauen könntet ihr vielleicht einmal die folgenden:
          http://wordpress.org/extend/plugins/wp-google-fonts/ oder
          http://wordpress.org/extend/plugins/fontmeister/

          Außerdem bin ich nicht sicher, wie gut die Integration bei responsive Themes funktioniert, da hier die Styles ja teilweise auch in den CSS Media Queries für verschiedene Bildschirmformate noch einmal angepasst werden. Ich hoffe die Info ist dennoch hilfreich. Grüße, Ellen

          • dave 2:39 pm on February 17, 2013 Permalink | Log in to Reply

            Vielen Dank!
            Ich werde wohl auf ein update von fontmeister warten müssen, weil ich mein eigenes repository hab (gekaufte und auf meinem server abgelegte Fonts, die nicht bei google etc. zu finden sind).

      • tymcat 8:24 pm on December 3, 2012 Permalink | Flag unresolved
        • Someone marked this normal
          6:45 pm on December 6, 2012
        • Someone marked this resolved
          6:15 am on December 6, 2012
        • Someone marked this unresolved
          5:37 am on December 6, 2012
        • Someone marked this normal
          5:36 am on December 6, 2012
        • Someone marked this resolved
          11:07 pm on December 5, 2012
        • Someone marked this unresolved
          11:07 pm on December 5, 2012

        Tags: @font-face, , ,   

        Webfont, childtheme and CSS – where, what? 

        I want to use a custom made webfont.
        I created a font folder in my Nori child-theme and placed the different formats – eot, woff, svg and ttf.
        What I couldn’t figure out is – where to paste the @font-face CSS, delivered by FontPrep (or FontSquirrel)?

        • into the style.css in the child-theme folder?
        • into the stylesheet.css created by FontPrep?

        How to refer to it in the original style.css?

        Ich möchte einen eigenen Webfont benutzen.
        Soweit habe ich im Nori Child-Theme-Ordner einen Fontordner mit dem Font drin platziert.
        Aber wo kommt das mitgelieferte @font-face CSS (von FontPrep/FontSquirrel) denn nun hin?

        • in das Child-Theme- style.css?
        • im stylesheet.css von FontPrep lassen?

        Wie funktioniert die Verlinkung mit dem originalen Style.css?

        Ich hatte ihn schon mal am laufen, er musste aber noch repariert werden, und nach mehreren Versuchen ist der CSS-Müll überall verteilt :-/
        Diesmal würde ich es gerne nur an EINE Stelle packen, damit es funktioniert…

         
        • Ellen 8:00 pm on December 4, 2012 Permalink | Log in to Reply

          @tymcat In you are a little bit flexible in which fonts to use, I would recommend the Google Webfonts library instead of @font-face. The font rendering is a lot better in my opinion and the set up is easier, too.

          You can just include your font via the @import option (you will get the code on the Google webfonts website) and then change the font-family names (it’s also explained in the Google Webfonts instructions). You might have to use !important to change the font family in a Child theme style.css file.

          • tymcat 2:59 pm on December 11, 2012 Permalink | Log in to Reply

            Thank you Ellen,
            I did get Google Webfonts running some time ago.
            But I want to use my own font for body text & PT Sans for headlines.
            Because I heard that different sources to be counterproductive I placed all fonts locally on my server.
            So far I am unable to see them in WP.
            Erroneously I didn’t realise that the font was open on my computer and assumed the page to work.

            What else do I have to use besides the following code in style.css
            and the fonts in wp-content/themes/norichild/fonts?

            @font-face {
            font-family: ‘hoolvetica’;
            src: url(fonts/’hoolvetica.eot’);
            src: url(fonts/’hoolvetica.eot?#iefix’) format(’embedded-opentype’),
            url(fonts/’hoolvetica.woff’) format(‘woff’),
            url(fonts/’hoolvetica.ttf’) format(‘truetype’),
            url(fonts/’hoolvetica.svg#hoolvetica’) format(‘svg’);
            font-weight: normal;
            font-style: normal;
            }

            A colleague advised me telefonically to insert an @import tag for the fonts into each page – but where??
            I am pretty frustrated after a month of trying all sorts of plugins and tags, studying selfhtml, http://www.beezo.de/einbinden-externe-schriftart and god knows what youtube gurus, just to get more and more confused.
            I really appreciate a clear explanation (or link to).

        • dave 9:24 pm on February 27, 2013 Permalink | Log in to Reply

          Well. It seems this is quite some time ago, if you haven’t found a solution, here’s how I am doing this – I got the code from my seller – and the @import MUST be at the beginning of the CSS:

          @font-face {font-family: 'Flexo-Medium';src: url('http://davidbraun.ch/webfonts/myfontname.eot');src: url('http://davidbraun.ch/webfonts/myfontname.eot?#iefix') format('embedded-opentype'),url('http://davidbraun.ch/webfonts/myfontname.woff') format('woff'),url('http://davidbraun.ch/webfonts/myfontname.ttf') format('truetype');}
          

          then, things get simple: In the CSS, just go with

          h1 {font-family:'Flexo-Medium', sans-serif; font-size: 1.45rem}
          

          HINT:
          Since you define the Name of the Font yourself

          @font-face {font-family: 'Flexo-Medium';

          you could very well also give them obvious names, like ‘thin’, ‘light’, ‘regular’, ‘demi’, etc…

          PS: Do you do german?

          • mgfrias 9:29 am on April 15, 2015 Permalink | Log in to Reply

            Thanks Dave! This is the only thing that works! :)
            You’re right, the key to it is placing the fonts directory outside of the theme directory. For some reason, it doesn’t work if you call the font files using a relative path.

            Another solution is having a directory (call it “extrafonts”) and place all your fonts in it. Create a separate CSS file — call it myfonts.css and define all your fonts in this file: ie. @font-face{font-family: ‘NewFont’; src: url(‘newfont.eot’) … etc
            Place the myfonts.css in the ‘extrafonts’ directory with all your fonts files. I had about 5 fonts to embed with the varying weights so this was very useful.

            I uploaded the “extrafonts’ folder in my home directory so the address of my css is: http://www.mywebsite.com/extrafonts/myfonts.css

            You can embed the fonts by linking the myfonts.css from header.php file.
            In the header.php file, place

            just between the tags just under the tag.
            I’m using the Zuki theme, but this should work for all the themes.

        • Katharina 11:23 am on August 21, 2013 Permalink | Log in to Reply

          Hi,

          ich habe das selbe Problem wie tymcat und komme seit Tagen nicht weiter, trotz toller Bücher und tutorials. Auch Daves Anweisung hilft mir noch nicht weiter.

          Ich möchte die Schrift Znikomit auf meiner wordpress-Seite verwenden (nur für die Überschriften). Es wird aber in Firefox und IE (andere habe ich nicht probiert) nur meine Ersatzschrift angezeigt (Georgia).
          Folgendes habe ich in mein Child-Theme geschrieben:

          @font-face {
          font-family: ‘znikomitregular’ !important;
          src: url(‘fonts/znikomit-webfont.eot’);
          src: url(‘fonts/znikomit-webfont.eot?#iefix’) format(’embedded-opentype’),
          url(‘fonts/znikomit-webfont.woff’) format(‘woff’),
          url(‘fonts/znikomit-webfont.ttf’) format(‘truetype’),
          url(‘fonts/znikomit-webfont.svg#znikomitregular’) format(‘svg’);
          font-weight: normal;
          font-style: normal;
          }

          h1, h2, h3, h4, h5, h6 {
          color: #4D4845 !important;
          font-family: ‘znikomitregular’, georgia, serif !important;
          text-rendering: optimizeLegibility;
          }

          Wo könnte das Problem liegen?
          Den @import Befehl brauche ich doch nicht, wenn ich mit einem child-theme arbeite, oder liege ich da falsch? Falls ich den doch brauche, wo genau würde er hinkommen und wie würde er aussehen?

          Vielen Dank schonmal für Gedanken und Tips!!

      c
      compose new post
      j
      next post/next comment
      k
      previous post/previous comment
      r
      reply
      e
      edit
      o
      show/hide comments
      t
      go to top
      l
      go to login
      h
      show/hide help
      shift + esc
      cancel