Home>Support>Specific Custom CSS for Chosen Custom Font

Specific Custom CSS for Chosen Custom Font

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

A small conflict has arisen between a minimizing plugin and my selection of custom font. I am trying to override that through custom css, as per the plugin’s author. Who suggested that I utilize the “!important” in telling my theme and the plugin what I want to do.

That makes sense. The font I am wanting, is listed the drowdown choice of fonts for my vantage premium theme. The query, is what to exactly put in custom css.

I have this idea, from thread research here and the web. Is this right?
____________________________________________________

@font-face {
font-family: “Handlee”;
src: url(“http://mysite.com/fonts/handlee.eot”);
src: url(“http://mysite.com/fonts/handlee.eot?#iefix”) format(“embedded-opentype”),
url(“http://mysite.com/fonts/handlee.woff”) format(“woff”),
url(“http://mysite.com/fonts/handlee.ttf”) format(“truetype”),
url(“http://mysite.com/fonts/handlee.svg#fontname”) format(“svg”);
}
body {
font-family: “Handlee”, handlee regular, redress, sans-serif !important;
}
_____________________________________________

Of course, mysite would be my actual url.

Thank you.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 4 months ago oldasdirtuser

    i tried it…and no, not working…more research…

  2. 10 years, 4 months ago oldasdirtuser

    Ok, do I have to upload Handlee font to my server? Utilizing something called Font Squirrel?
    If so, I’ll try that.

  3. 10 years, 4 months ago Daniel
    Hi, I Work Here

    Hi there,

    You should not need to use Font Squirrel but if you want, you can.But first please try using only the “ttf” extension for all browsers in your code, because this format can be rendered by most browsers.

    Please try and let me know!

  4. 10 years, 4 months ago oldasdirtuser

    I tried this in the custom css, but not working.

    CSS selector {
    font-family: ‘Handlee’, serif;
    }

    I did this on the homepage as a tester, adding it to the html

    that works, but wow, every page i would have to do.

    Google offered this option
    @import url(http://fonts.googleapis.com/css?family=Handlee);

    but i do not know where this would go.

  5. 10 years, 4 months ago oldasdirtuser

    sorry i left out the per page one…

  6. 10 years, 4 months ago oldasdirtuser
    <link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
  7. 10 years, 4 months ago Daniel
    Hi, I Work Here

    Hi there,

    You should place the @import url(http://fonts.googleapis.com/css?family=Handlee); via a child theme style.css. Here is a guide on how to create one : http://codex.wordpress.org/Child_Themes

    E.g

     @import url(http://fonts.googleapis.com/css?family=Handlee);
    
    /*the rest of your custom css can go here*/
    

    Try that out and let me know the outcome

    Cheers

  8. 10 years, 4 months ago oldasdirtuser

    I do appreciate all the aide here. But having spent many hours trying to grasp the concept of creating a “a child theme” appears to be beyond me, presently. I am continue to read your pages on the subject as well as other (tutorials) throughout the internet. But at this hour the concept escapes me. It is as if there is a locked door and I can’t get in. Just trying to wrap my head around the issue. I think I may have reached the point of no return! Ha

    I have another full domain for a project that is not yet come to full fruition and I was wondering if I could use that domain as my “child theme” for Vantage. In other words can they be 2 different urls?

    ORIGINAL TOPIC: I have implemented the page by page text html code for Handlee font. I did not do ALL my posts but the most recent ones and all my main pages and sub pages. This added no impact in measurable speed, but is being called out as at @ code. Which I don’t understand as their no @. So far so good, but it “bumps out” if I have any edits to page, so I must assure I reinsert before saving. Most of the pages are static now, as the design is 97% completed.

    After much manipulation and testing of all plugins as to how the best ones work together for me, all pages within my domain are getting 99 for load times, according to Google, Pingdom, GtMetrix, TheBot.

    Still trying to resolve the inability to compress/minimize javascripts without site crash. But, speed load time seems unaffected. Maybe the 100 is humanly possible, but not my hand :)

  9. 10 years, 4 months ago oldasdirtuser

    Update: Upon a later timed set of tests, it appears the google font was not propagating in the earlier test scores of 99.

    The across the board has it as 93. ah, bummer. I will continue to resolve the aspect of adding font to as you suggest, a child theme. (sigh)

  10. 10 years, 4 months ago oldasdirtuser

    Resolved the aspect of 93 to 99. Placing the command at the top of the html was apparently considered above the fold. If I am comprehending the feedback, from results. Once I removed the line from the top of the page to the bottom. I waited well over the allotted time to retest and was met with the scoring of 99.

    Totally understand this is not the Best solution, nor do I consider it permanent. But it helps me feel better to at least SEE my font choice, live, while I am learning about the child theme concept.

    I hope you don’t me updating my success and failures here. But I have found this forum to be very beneficial. When I need help I always search the threads first. A great deal of knowledge lingers here to be sure.

    Perhaps, someone may find my WP/Vantage journey of some guidance.

  11. 10 years, 4 months ago Daniel
    Hi, I Work Here

    Hi there,

    We appreciate what you doing. This will help other people who need to solve such an issue when they come across them.

    Always feel free to open a new thread whenever you require support.

    Thank you

  12. 10 years, 4 months ago oldasdirtuser

    UPDATE:
    At last methodology, I was inserting an html command on all pages and most recent posts to get my desired Handlee font. Painstaking but doable. Another downside, the tests at Pingdom, GTMetrix and Google were all saying that I had no cache expiry on the font and the font was not being optimized/compressed/or minified on any level. A definite negative impact.

    Knowing this was not a long term solution, I have read and read !

    Child theme creation really did not seem to fit the bill for I was wanting to do. The more information I garned. Really, custom CSS should work.

    No matter how many times I tried putting various combinations into the custom css regarding font, the issue was not being resolved.

    UNTIL today. Keep in mind, this epiphany came with coffee number 3 and a chocolate candy bar (the lunch of champions)…

    I peered at to the code snippet Addo had posted above

    @import url(http://fonts.googleapis.com/css?family=Handlee);

    It did not work before but I tried it again. Without success.

    Then I asked myself, ok this command is telling my blog to import this url from google fonts. Easy. Plain. Without question. Sooooo what’s the problem? Perhaps the url is down? (stranger things have happened in the world of the internet)…

    I copied the url into a new browser page….
    AND WOWZERS …. totally not what I was expecting to see!
    Code, baby…code…
    Sweet untried code.
    Code ready to be plucked, harvested…code ready for my Custom CSS!

    C-O-P-I-E-D
    P-A-S-T-E-D
    S-A-V-E-D
    ………………………………………..

    OOOOooooyah ! Success never looked so sweet as went written in Handlee custom font!
    Ta Dah ~ I’m so HAPPY!

  13. 10 years, 4 months ago Daniel
    Hi, I Work Here

    Hi there,

    Glad to see you figured it out! :)
    Also thank you for sharing the solution so that others with a similar problem may have a look at this thread.

    Cheers!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More