You also need to define the actual quotation marks. The following code with give you correct quotation marks. You do not actually type any quote marks in the html.
\201C :Opening double quotes
\201D :Closing double quotes
\2018 :Opening single quotes
\2019 :Closing single quotes
Now you have for the opening double quote mark:
q:before {
content: '\201C';
}
And.. for the closing double quote mark:
q:after {
content: '\201D';
}
Then add the font and font size. This way you can use a different font for the quote mark than you do for the rest of the text. I always use a sans serif for the copy but the quote marks for Times New Roman are rather nice.
q:before {
content: '\201C';
font: Times New Roman;
font-size: 200%;
}