MS Word copying text from a html pre element with inner elements with font-family set to inherit, results in font-family not being set correcly

I am having this problem where when copying text from within a pre tag into microsoft word, the font-family being copied is set to the first computed font-family for the element. For example if * has font-family: inherit the copied font-family for the text would be set to inherit in microsoft word, if there is no other font-family set directly for that object.

This problem does not occur if the pre tag is changed out with a div, but this is not possible in my case.

Does anybody know a way to fix this such that the correct font is copied, where the font-family is still being applied to the pre element.

Demo code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css">
    <title>Document</title>
</head>
<body>
    <pre><code><span>This is text</span></code></pre>
</body>
</html>

test.css

*{
    font-family: inherit;
}

pre {   
    font-family: Verdana,Helvetica,Arial,sans-serif;
}