How to Use Merriweather on your site

Use Merriweather in 30 seconds! Add this as the first element in the
<head> of your HTML:

<link href=’http://fonts.googleapis.com/css?family=Merriweather&#8217;
rel=’stylesheet’ type=’text/css’>

Then add Merriweather to your CSS font stacks like any other font, for example:

h1 { font-family: ‘Merriweather’, Georgia, serif; }

60 Responses to How to Use Merriweather on your site

  1. I have a problem with bold and latin-ext in Opera web browser. Can anybody help?
    Link to example (open in Opera) http://jsfiddle.net/5KYtQ/5/
    Characters: śźćŚ do not display in bold.

    • Merriweather says:

      The reason you are having this problem is that the glyphs śźćŚ have not been added to the Google version of the upright (not italic) Merriweather. They will be soon.

  2. Hi!
    I’m also waiting for this update. When can I expect it?

    • Merriweather says:

      It is hard to give you a definite date in part because I don’t control how fast Google posts updates. My best guess today is Early to mid August. I can also add that the latest hinting seems to fix all the problems seen in the samples I posted here.

  3. Piotr Arendt says:

    Hi,

    Where I can download Merriweather with Latin Extended?

    Grat work, by the way!

    • Merriweather says:

      Thanks very much! As of today there is no downloadable version of the extended version. That should change in the next month. If you follow this web site you will get emails when I post a new story. As soon as the next version is published I will post a story and you will be informed that it is available.

  4. Piotr Arendt says:

    Thank you! Can’t wait to use the extended version.

  5. NspyroDesign says:

    Hello!
    first of all thax for creating this font!
    I have a doubt about using it, I have found if through google fonts…
    so it renders normal (non italic) in IE, FF, Chrome, but in Safari it becomes italic… even with styles “font-style: normal;” etc..
    thanx!

    • Merriweather says:

      Have you removed all copies of the font from your desktop? If you have local copies of the font installed it will override what you see. If you have done this and the problem is still there please let me know what OS you use, how you are hosting the fonts e.g. with google or locally and I will work with Google to fix the problem.

  6. NspyroDesign says:

    Hello! thankyou for the explanation.
    that’s true – I uninstalled the font from my computer completely – and then I started seing the font on the web site correctly.
    this problem I had was on PC, on MAC with the fonts installed there were no problem.
    well I needed the fonts installed in order to be able to use the PSD designs for programming.
    Thank you!!🙂

  7. Piotr Arendt says:

    Hello,
    Are there any news on Merriweather Latin Extended?

  8. Merriweather says:

    The lightest weight is complete now along with the regular. The final weight needed which is the very heavy black weight is making rapid progress now. If I am diligent I may finish by the end the next week. There will also be a little time spent optimizing hinting for Windows after that. People who just want the OTF formatted stuff for printing will be able to have files from me slightly sooner.

  9. franckscode says:

    Hi Eben, we are using Merriweather on our website, it’s a german newsportal. We are very comfortable with your font, it’s very nice. Compliment. But we have some little issues, one is almost exicotic, and we are interested if they are known and if there is a possibility, that they will be fixed or improved by new updates? 1. In some Browsers the font is not aliased, it is pixellated: IE7, IE8, Firefox 17.0, Chrome Chrome 28.0.1500.72 Your were talking about Kerning. Could this also be the solution for this. 2. Our exotical issue: User with Safari on Windows 7 cannot see german specialchars (ÄäÖöüß) in the printview. Excepting ‘Ü’ is visible. We allready tried the latin extended version, but it’s the same. We also would gladly pay / donate for your help. Tanks a lot,

    • Merriweather says:

      There is a new update to the serif Merriweather that has gone to Google. I am not sure when they will push it live. If you are willing to do your own hosting you could use it sooner. It might also make sense to use a different 3rd party font hosting service. BTW- There is also an update to the sans that will be done in fairly soon. I don’t know if that’s something you also want. I’ll contact you off this site and ask you some more questions about your needs.

  10. The Merriweather font on Google Fonts database doesn’t have some latin-extended characters such as “ş” and “ğ”. However, they exist in the italic light form. Do you plan an update, or do you have any suggestions? Thanks…

    • Merriweather says:

      You are quite correct. An update that addresses this has been sent to Google ( version 1.51) but they are not updating fonts again at this time. I expect them to begin doing that again but I don’t know when. If you want the fonts for print I will be sending the next version (1.52 or 1.53) to Font Squirrel and other places so people can get access to it independently of Google. If you want access to the newest version for the web immediately and also to additional weights then sign up for WebInk and you can access them there. WebInk will also be getting an update that adds 2 more weights (1 roman 1 italic) support for a few extra languages and more support for currencies. The WebInk version is also better because it supports many Open type features. Is this helpful?

      • I just cannot believe how caring you are…🙂 Thank you!

      • I’m sorry, but I couldn’t make webink.com work for me. The same problem there. I cannot produce “ş” and “ğ” letters. Could you mind if I asked you to send me the latest serif fonts so that I could host them locally to use on my website?

      • Hi again! I’m here just to ask if it is possible to learn when the last version of your font will be made public (1.53)… You have followers…🙂

      • Merriweather says:

        I made a lot of progress in the last few days but it is hard to say with certainty when the update will go to Font Squirrel and other places. It will be a another week at least. I am sorry this is taking a while. My hands are very full just now. In the meantime did you let Web Ink know? I am sure they would be happy to help you trouble shoot this with you. I know the glyphs are there. It is probably a matter of not using a default North American subset of the font.

  11. Merriweather says:

    It may be that you have to tell them not to subset for English. I know they have those letters. I did a lot of testing in Turkish! I’ll write to you on the gmail address.

  12. Hi Eben!

    Im thinking about using your great Merriweather for an institutional site. For the moment, the other options I’m thinking of are Alegreya, Droid Sans and Georgia. Could you or anyone reading this help me out with my decision?

    Also would yo recomend using Merriweather for the whole site including headings and body, or combine it whith a specific sans serif font for headings?

    Thx!
    Cheers!

    • Merriweather says:

      I can’t recommend a font unless I have a sense of the factors that are going into the choice. Using something other than the classic web fonts is usually about asserting a specific feeling you want. In the case of this institution is it just a matter of personality? Are there any performance factors that need to be accounted for? What’s the audience like? How important is auto-translation by Google or Bing? Do you know how to use this tool to swap fonts in a web page?: http://fontdragr.com/ The best way to see if you are getting a result you is to try combinations out. This tool allows you to do that pretty painlessly. You may also want to look into Firebug for Firefox which can also let you do this or TypeCast which let’s you try things in a very sophisticated way. I just wrote an article on personality in type for them. http://typecast.com/blog/the-voices-of-type This may help you think about the question of personality. I should also not that WebInk is getting has the most sophisticated versions of Merriweather now. You may want to see what kind of deal you can strike with them if Merriweather does prove to have the feeling you want. I hope this is helpful.

  13. Regina Ramos says:

    I’m using this font on my site atchuup.com (using it on the post and article titles). But I don’t know why it doesn’t look like it should. I already had the code added in the head section and then updated my css. Any ideas why it’s not working? Thanks.

    • Merriweather says:

      What I checked it it looked normal to me but to know what to advise you I need to have more details. What browser, what OS and whatever other details you can provide. Does it display but doesn’t look right or do you just now get the font at all?

  14. Joe Duarte says:

    Hi Eben, thanks for the font – I’m using it for body text on my new website. Question: Does Google include Merriweather’s Latin-1 Supplement characters in its base “Latin” subset? Another way of asking this might be: Does Google use the term “Latin-Extended” in the strict Unicode sense? They don’t mention the Latin-1 Supplement characters, which are lower in the range and more common than Latin Extended characters, including things like the copyright symbol and basic Spanish accented characters. It’s been hard to find detailed documentation on what exactly Google includes in their subsets. Another question: Which subset contains the left quote marks, em-dash, en-dash, etc? These are not part of the Unicode Latin Extended blocks – they’re in a block of their own, but Google doesn’t say anything about the General Punctuation block. Thanks!

  15. Phil Löhr says:

    Hello. We are using you font on our website lto.de. Our users recognized in some cases that the font looks very frayed. We tried to reproduce it and found out the following: If they use Firefox (version 38.0)and the hardware acceleration is deactivated, they really see these frayed letters. What we couldn’ t reproduce: Some users even see this frayed letters in the IE 10. The display resolution of these users always was HD (1920 x 1080 px). Have you already heard about this problem and is there a solution? We could only find solutions for the user but not for our developers. We don’t want to change the font completely. Thank you!

  16. Phil Löhr says:

    Hello! We use the Merriweather font on our website http://www.lto.de. Some of our users wrote us that the font looks very frayed in HD (Guess they had the monitor resolution: 1920 x 1080 px). We tried to reproduce it and found out the following: When the hardware acceleration in Firefox (version 38.0) is deactivated you can really see that the font looks very frayed. But what we couldn’t reproduce is: Rhe users have the same problem in IE 10. We don’t know why it is like this. Have you already heard of this problem and do you know a solution? We don’t want to change the font on our website but a lot of our readers use the IE. It is also not an option to write them to activate the hardware acceleration. It would be very helpful if there is a developer’s solution. Thanks in advance. Kind regards

    • Merriweather says:

      I strongly suspect that this is because Google has STILL not updated the roman to use the one that has hinting. Why this is I can’t begin to understand but… In terms of practical results what I suggest is that you self host using fonts I can supply to you or you can collect from Font Squirrel.

      You can do this at no cost.

      In addition to this it is ALSO true that if a user has an old version of Merriweather installed on their machine that will be used rather than whatever is hosted.

      If in addition to this you would like to have the files reduced in size or a slightly narrower version would be desirable etc I would be happy to discuss making a special edition for you. One advantage of this is that we could create a modified name that will ensure nobody has an old version that substitutes in.

      Please let me know if you have any questions.

  17. Hi! I noticed that there was a problem with the italic versions of the font in Safari: if we increase the letter-spacing CSS property, most letters seem to get more space on their right, but the “i” remains very close from the following letter (as if the letter-pacing was not applied to it). Any idea of how to fix this? Thanks a lot, and great job at designing this font!🙂

    • Merriweather says:

      Hmm! I will have to have a look and see if i can reproduce this so I have a shot at fixing it. Can you send me a sample so I can see the total context? Also what OS and version # is it & what version of Safari? I might be a a very broad bug or quite a narrow one. I may be able to send you font to self host to get past this problem. Do you self host now or use the Google service – or?

      • Thanks for your quick reply! I’m using the Google service, and the bug appears on my iPhone (Safari on iOS 8.4, and Chrome, and all the webkit browsers since they use the same engine) and my laptop (Safari 8.0.7 on Mac OS 10.10.4). I can send you a screenshot, or you can go to the Google Fonts homepage, type “Merriweather” in the search box at the top left (so that Merriweather and Merriweather Sans appear on the page), and change the letter-spacing property of the page to, say, 1rem in the Web Inspector. You should see the bug (I’m noticing that the bug is present on Merriweather Sans too). However, for some reason, I can’t reproduce that same bug on the Merriweather page https://www.google.com/fonts/specimen/Merriweather.

      • Merriweather says:

        Thanks for the detailed context. I’ll see what I can do to reproduce the bug or discover the reason for it being present in some situations and not others. I’ll also see if I can fix it or make a suggestion about how to avoid it. It would be great see how you use it or are thinking of using it as well.

      • Well, you can check that on my website http://robi.me: basically, I’m using the tag in the of my document, and then I have a class in my CSS that contains:
        .tagline {
        font-family: ‘Merriweather’, ‘serif’;
        font-style: italic;
        letter-spacing: 0.08rem;
        margin: 0.5rem 0;
        }
        If you change the value of letter-spacing to 1rem (for instance) in Safari’s web inspector, you should see the bug I’m talking about.
        Hope that helps!

      • Meh, WordPress comments escaped the tags in my reply:

        * I’m using the tag in the of my document, and then I have a class in my CSS that contains:

  18. Come on!! Trying one last time, and then I’ll let you browse the index.html file by yourself🙂

    * I’m using the tag <link href=’http://fonts.googleapis.com/css?family=Merriweather:400italic’ rel=’stylesheet’ type=’text/css’> in the <head> of my document, and then…

    (Feel free to delete these comments…)

  19. Joel Skotak says:

    Dreamweaver CC2015 always renders Merriweather as italic, even if I set the font-style:normal. I’ve reinstalled the font several times but no luck. Any ideas on why this is happening? The font renders corrently in the browser, just not in dreamweaver. I’m on a PC.

    • Merriweather says:

      Are you willing to host the font locally? If so then using the version available from Font Squirrel should solve the problem. Please let me know if it doesn’t or if I have misunderstood what you need.

  20. We are using Merriweather as our header font for all of our company word documents – however when we PDF these documents to send to clients, the font corrupts and appears in italic with increasec curning. How do i fix this issue?

  21. Jason Devine says:

    I’m using the lovely Merriweather (served from Google) on a project, and the sanitizer in Firefox Developer Edition is rejecting the light italic .woff2; it won’t render it. Seems fine in standard Firefox (42), also in Chrome.

    downloadable font: Layout: DFLT table doesn’t satisfy the spec. for script tag DFLT (font-family: “Merriweather” style:italic weight:300 stretch:normal src index:2) source: https://fonts.gstatic.com/s/merriweather/v8/EYh7Vl4ywhowqULgRdYwIHM1hBkL4m68a-ReB_y0NYc.woff2 css:1:12

    ^That’s just the first line, there was more output, let me know if you’d like the rest of it! It’s not critical by any means, but I thought I’d point it out

  22. Ömer says:

    Is any update on Google Fonts library? ‘ş’ &’ğ’ problem continues.

    • Merriweather says:

      I don’t think they will update it for another 6month or year. I recommend self hosting the font taken from Font Squirrel for access to hinting and a larger glyph set for now.

  23. I am having an issue in safari 9.02 where the letter f will not display when immediately followed by the letter i. Any ideas why this would happen? Using google fonts 300 weight. Thanks

    • Merriweather says:

      We pushed an update recently and it looks like a bug was introduced. I will be working to get it fixed today/ASAP.

  24. Dear all, I recently downloaded the font from Google (and also from FontSquirrel) but I cannot print some characters (English). Any help please? Many thanks.

  25. Phil Löhr says:

    We now have the problem that Merriweather doesn’t support the “separator character” in Safari. Chrome and Firefox realize that the character is not available in the font and render it in the default font. Safari does not do that and renders strange characters. Have a look: https://dl2.pushbulletusercontent.com/qds54m8o1U4iGpru1jRlNqLFFZN1VmYo/20160318_150341.jpg

  26. Merriweather says:

    Do you have any idea what unicode the separator glyph is? Maybe I can add it quickly. I hope so. This seems quite bad.

  27. Merriweather says:

    Also do you self host or use Google or someone else?

  28. Phil Löhr says:

    It’s hosted by Google

  29. Merriweather says:

    Are you willing to self host? If you are the solution will arrive a bit faster.

  30. Phil Löhr says:

    No problem, but what’s the difference? Data will be the same…

  31. Phil Löhr says:

    To whom it may concern: We found a solution now on https://blog.decaf.de/2016/03/04/705665289569099777/
    With this hint, Merriweather has no problems with “­”

  32. Merriweather says:

    Thanks!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s