Override the google custom search css

Question

In my site have google custom search. I have an issue with the font of the search result. I need Arial,sans-serif .

Here is my google search code.

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Here is my css comes from google.

.gsc-control-cse .gsc-table-result {
    font-family: font;
}
.gsc-control-cse, .gsc-control-cse .gsc-table-result {
    font-family: Arial,sans-serif;
    font-size: 13px;
}

.gsc-control-cse .gsc-table-result this class was override the font-family of below class.

Help me to solve this issue.

Answer 1

I haven't looked into CSS, but I think you are following a very old example. Google now have a customizable search engine creator, in which you can specify which color and font you wanted for each element

See

Also, you can define this in code by using a context XML file, the detail of which is available in the Look and Feel section

Answer 2

If I understand you correctly cant you just use !important for the one you want to override like so:

font-family: Arial,sans-serif !important;

Answer 3

thanks lemondrop worked perfectly I changed

.gs-result .gs-title,
.gs-result .gs-title * {
    color: black;
    text-decoration: none; 
    font-family: 'PT Sans Caption', Tahoma, sans-serif; 
}

to

.gs-result .gs-title,
.gs-result .gs-title * {
    color: black !important;
    text-decoration: none !important; 
    font-family: 'PT Sans Caption', Tahoma, sans-serif !important;

}