WordPress.org

Forums

Spun
[resolved] Spun layout with Syntax Theme fonts (22 posts)

  1. carlosapin
    Member
    Posted 10 months ago #

    I love Spun theme layout, but would love to change its fonts to the ones used in Syntax Theme
    I have already created a Child Theme but I'm new to css editing and I'm having a hard time to identify fonts and where I should make all changes. Any hints? Thanks!

  2. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Do you know what fonts are used in the Syntax theme?

  3. carlosapin
    Member
    Posted 10 months ago #

    That's the point... There are so many references to the fonts in the css that I get confused... These are just some of them:

    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;

    body,
    button,
    input,
    select,
    textarea {
    color: #404040;
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 16px;
    font-weight: 400;

    pre {
    background: rgba(119, 119, 119, 0.5);
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 0.9375em;
    line-height: 1.6em;
    margin-top: -2px;
    margin-bottom: 24px;
    max-width: 100%;
    overflow: auto;
    padding: 24px;
    }

    code, kbd, tt, var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 0.875em;
    line-height: 1.71429em;

    /* =Fonts */
    @font-face {
    font-family: "Genericons";
    src: url("fonts/genericons-regular-webfont.eot");
    }

    @font-face {
    font-family: "Genericons";
    src: url(data:application/font-woffcharset=utf-8base64 (followed by thousands of characters)

    /* =Global */
    body,
    button,
    input,
    select,
    textarea {
    color: #444444;
    font-family: Merriweather, Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 29.7px;
    }

  4. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Is there a particular font on this page that you want to use: http://syntaxdemo.wordpress.com/ ?

  5. carlosapin
    Member
    Posted 10 months ago #

    Mainly the fonts in the main text (content in pages/posts), as well as headers/titles.

  6. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Seems like they are the same font: Merriweather - Do you have this font (file)?

  7. carlosapin
    Member
    Posted 10 months ago #

    Just checked in the Font Book in my Mac and I don't seem to have it.

  8. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Can you try to find it here http://www.fontsquirrel.com/

  9. carlosapin
    Member
    Posted 10 months ago #

    OK, and then? how do I make it the default font for Spun? thanks!

  10. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    It's a lot of effort to tell you the answer in 1 big post, and honestly I'm not going to do that because I can't be bothered. Would you rather me walk you through sequentially or wait for someone else to give you a more definitive answer?

  11. carlosapin
    Member
    Posted 10 months ago #

    Sequentially would be ok, I don't want to bother you at all. Meanwhile I'll also try to figure out a way to do it myself. Thanks for your help again.

  12. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Run your font file through this generator: http://www.fontsquirrel.com/tools/webfont-generator

    It'll generate a .zip file I think and within that you'll find a bunch of font files. You need them all, example the ones I've outlined in red http://snag.gy/LLLiJ.jpg

    Create a new folder inside your Child Theme and call it "fonts" (just for easier management) and put your generated font files in there

  13. carlosapin
    Member
    Posted 10 months ago #

    Done.

  14. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Back in your generated .zip file there will be a file called "stylesheet"(.css), open that in Notepad and copy all of the CSS.
    Then paste it into your Child Theme style.css file.

  15. carlosapin
    Member
    Posted 10 months ago #

    Not finding the stylesheet in the zip.file. I downloaded it several times and it's not generated.

  16. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Hmm so if you open up that "index.html" file in your browser it doesn't show the font properly?

  17. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Okay I've got the CSS, copy this and paste it into your Child Theme style.css file:

    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 28, 2014 */
    
    @font-face {
        font-family: 'merriweatherregular';
        src: url('merriweather-regular-webfont.eot');
        src: url('merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('merriweather-regular-webfont.woff') format('woff'),
             url('merriweather-regular-webfont.ttf') format('truetype'),
             url('merriweather-regular-webfont.svg#merriweatherregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  18. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    You'll need to change the paths to the fonts to the correct paths:

    @font-face {
        font-family: 'merriweatherregular';
        src: url('/wp-content/themes/your-child-theme-folder/fonts/merriweather-regular-webfont.eot');
        src: url('/wp-content/themes/your-child-theme-folder/fonts/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/your-child-theme-folder/fonts/merriweather-regular-webfont.woff') format('woff'),
             url('/wp-content/themes/your-child-theme-folder/fonts/merriweather-regular-webfont.ttf') format('truetype'),
             url('/wp-content/themes/your-child-theme-folder/fonts/merriweather-regular-webfont.svg#merriweatherregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  19. carlosapin
    Member
    Posted 10 months ago #

    OK, done that.

  20. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Now add at the bottom of your Child Theme style.css file:

    .site-title,
    .site-description,
    .hentry .thumbnail-title,
    .entry-meta,
    .entry-title,
    .entry-title a,
    .entry-content,
    .entry-summary,
    .single .format-aside .entry-content,
    .comment-content,
    .comment-meta,
    a.comment-reply-link,
    a#cancel-comment-reply-link,
    .nocomments,
    .widget,
    #infinite-footer .blog-credits,
    #infinite-footer .blog-credits a,
    #infinite-footer .blog-credits a:hover,
    #infinite-footer .blog-credits a:focus,
    #infinite-footer .blog-info a,
    #infinite-footer .blog-info a:hover,
    #infinite-footer .blog-info a:focus {
        font-family: merriweatherregular;
    }
  21. carlosapin
    Member
    Posted 10 months ago #

    It worked! Now there are just some minor adjustments left that I can do myself. Thanks a lot for your help and patience.

  22. carlosapin
    Member
    Posted 10 months ago #

    Hi! I would like to add that I found a very good plugin that makes all this process much simpler:

    http://wordpress.org/plugins/easy-google-fonts/

Reply

You must log in to post.

About this Theme

About this Topic