Tagged: custom webfont Toggle Comment Threads | Keyboard Shortcuts

  • c.k 2:51 pm on December 5, 2016 Permalink | Resolved
    • c.k marked this resolved
      10:25 am on December 6, 2016
    • c.k marked this unresolved
      10:25 am on December 6, 2016

    Tags: custom webfont,   

    Neubau Google Font Changes 

    Neubau
    I used Easy Google Fonts to change fonts, but I do not succeed to change the menu fonts on the right (even if I tried with a new font control for ‘a’) and the font for ‘credit’ below.
    Thanks for an answer and best regards, Christiane

    With Firefox developper tool I found the css elements and resolved the problem myself with a new font control for all those elements together. Bye…

     
    • Ellen (Support-Team) 9:30 am on December 7, 2016 Permalink | Log in to Reply

      Hi Christiane,
      just in case you ever run into a similar issue (or anyone else). It’s always a good option to try to add !important behind your custom CSS value to make it work.
      Best, Ellen

  • silu 9:17 am on December 17, 2015 Permalink | Flag unresolved

      Tags: custom webfont, ,   

      Custom Fonts in Site Title, Post Title and Body Text 

      Dear Elmastudio support team,
      in the past three weeks I have tried almost every CSS code, plugin (Google fonts and others), advice and workaround to get control over our font setup at enough-magazin.de. But, as you might guess from me posting this here, nothing really works. Any idea how I can change those fonts and even control their sizes? THANK YOU

       
      • Marc (Support-Team) 8:45 am on December 21, 2015 Permalink | Log in to Reply

        Hi @silu,

        you can use plugins, own code or follow the steps provided by Google fonts to make a custom font available on your website. After this step you can change the font type (additionally to the font-size, which can be changed without providing other font types) with CSS code.

        Most browsers provide a CSS inspection tool, which can be used to identify elements on your website. To change the font type and size of your main menu, you can use the following code for example (the media query selects a minimum width of available space to provide different font sizes for different screen sizes):

        @media screen and (min-width: 767px) {
        	#site-nav ul li a {
        		font-family: Arial, sans-serif;
        		font-size: 48px;
        		font-size: 3rem;
        	}
        }
        

        Best,
        Marc

    • cyze79 5:40 pm on June 9, 2014 Permalink | Flag unresolved
      • Someone marked this normal
        11:04 am on June 10, 2014
      • Someone marked this resolved
        11:04 am on June 10, 2014
      • Someone marked this unresolved
        11:04 am on June 10, 2014

      Tags: custom webfont, , , Typekit   

      Hi Ellen,

      ich würde gerne Omnes und Proxima Nova als Fonts für Headlines/ Copy in Moka verwenden, dass ich soeben von euch gekauft habe. Da ich gesehen habe, dass beide via Typekit erhältlich sind, würde ich gerne wissen, ob ihr Erfahrung habt, wie ich die am besten mit einem Plugin/ Custom CSS einbinden kann!

      Besten Dank für die Hilfe und noch frohe Pfingsten,
      Bennie

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

        Tags: , , custom webfont,   

        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).

      • dave 9:27 pm on January 26, 2013 Permalink | Flag unresolved

          Tags: , custom webfont, webfont   

          Firefox / IOS, webfonts 

          Hello
          jetzt, wo wieder ordnung im forum ist, wage ich die frage nochmal:

          Ich habe bei myfonts einen satz webfonts gekauft und auf der website im Einsatz.
          wp läuft in einem unterverzeichnis und sollte ebenfalls in derselben Schrift laufen…

          safari und chrome auf osx 10.8 laufen tadellos, firefox und iOS hingegen zeigen den webfont auf der website, im wp kommt die ‘sans-serif’ …

          das einzige, was mir in den sinn kommt, ist, dass die webfonts per separatem CSS adressiert werden, und dies in wordpress nicht so eingebaut worden ist….

          muss ich in der php-vorlage den meta-link setzen? woran kann das sonst noch liegen?

          http://davidbraun.ch
          http://davidbraun.ch/werkstatt

          danke!
          david

           
          • Ellen 10:00 pm on January 30, 2013 Permalink | Log in to Reply

            @dave : Ich bin mir nicht sicher, ob das Problem nicht in der Darstellung der myfonts webfonts allgemein liegt, hast du die Fonts mit @font-face eingebunden? Sag mir doch noch einmal Bescheid. Viele Grüße, Ellen

            • dave 4:23 pm on February 5, 2013 Permalink | Log in to Reply

              Hi Ellen!
              Yup, ich habe @font-face benutzt.
              Habs aber auch schon herausgefunden:
              Firefox ist einfach weniger tolerant, er will einen absolut korrekten Pfad, die hab ichsicherheitshalber gleich absolut gesetzt, und jetzt funktioniert es auch… (erstaunlich, dass safari und Chrom auch mit ‘falschen’ Pfaden klarkommen)

        • dave 3:02 pm on January 25, 2013 Permalink | Flag unresolved

            Tags: , custom webfont,   

            Custom Font? 

            Hei
            Ich hab bei myfonts.com “meinen” Font als webfont gekauft und auf dem server liegen.
            dann gleich im style.css von baylys die Font-family umgeschrieben und getestet (ahem. natürlich nur mit safari)
            jetzt, hier auf meinem Rechner:

            • safari: perfekt.
            • chrome: perfekt
            • firefox: geht nicht

            was ich wohl unternehmen muss, um firefox meinen webfont näherzubringen? muss ich irgendwo den spezial-css-link einbinden wie auf den statischen Seiten?

            herzlichen dank!
            dave

             
            • Juliette 3:56 pm on January 25, 2013 Permalink | Log in to Reply

              Hm, mal sehen, ob das antworten so geht.

              Hier ist dazu ein Link, in dem das besser erklärt wird als ich das könnte:

              http://frequenzfolger.de/go/1o7ayyt

              Danke für Deinen Tipp, kranzkrone. Bin leider im CSS nicht so gut und warte jetzt einfach mal.

          • 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: , , custom webfont,   

            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