You don't actually need to use @font-face at all if you are just trying to use San Fransisco.
You can assume San Fransisco will come loaded, since Sketch only ships on MacOS. So all you should need to do is have your css like this:
font-family: -apple-system, BlinkMacSystemFont;
You do have an issue with your font-weight though.
900 will throw Black, not Semibold. The following are the correct numbers for each weight:
font-weight: 100; // Ultralight
font-weight: 200; // Thin
font-weight: 300; // Light
font-weight: 400; // Regular
font-weight: 500; // Medium
font-weight: 600; // Semibold
font-weight: 700; // Bold
font-weight: 800; // Heavy
font-weight: 900: // Black
This may have an issue if you are trying to specifically target the -Display variant of San Fransisco, since the OS will switch between -text and -display, based on the text size. But one of the big reasons of using SF instead of another font is to take advantage of these features.
Also, if you are building for pre v42, you may end up with Helvetica instead, and pre v3.5 you may end up with Lucida Grande, but you are quite a ways back at that point and you are probably choosing SF to give a native feel, so that is probably also a plus.