Home/ Questions/Q 8364737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T12:29:44+00:00

I’m using 2 font-faces and wish to switch between them using jQuery, thing is

  • 0

I’m using 2 font-faces and wish to switch between them using jQuery, thing is my font-face’s name is ‘ArvoBold’ and when I use:

css('font-family','ArvoBold')

it changes to a non-existing font named ArvoBold (no-quotes)! I’ve tried to make it work with:

css("font-family","'ArvoBold'")

But it doesn’t seem to work. I’ve also tried to create a variable:

var fontvar="'"+"ArvoBold"+"'";
css('font-family',fontvar);

And also with no success, because on the CSS of the element (checked using
Google Chrome’s inspector) it keeps using ArvoBold instead of ‘ArvoBold’.

Can anybody help me out?

Thanks in advance!

John

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure of your exact implementation, but this works by escaping the single quotes in the string:

    $(".font-face").css("font-family","\'ArvoBold\'");

    Why do you need the single quotes?

    Quick Test on escaping the single quotes outputs ‘ArvoBold’ in the content div:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>   
<style>
#content{border:solid 1px red;width:100px;height:100px;text-align:center;}
</style>
</head>

<body>

<div id="content"></div>

<script type="text/javascript">
$(document).ready(function(){
$("#content").html("\'ArvoBold\'");
});
</script>

</body>
</html>
    • 0