Search code examples
searchgoogle-custom-search

Override the google custom search css

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.

Solution

  • 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 image

    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