Support » Theme: Spun » Spun layout with Syntax Theme fonts

  • Resolved carlosapin

    (@carlosapin)


    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!

Viewing 15 replies - 1 through 15 (of 21 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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;
    }

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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?

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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

    Done.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Spun layout with Syntax Theme fonts’ is closed to new replies.