Adding custom font using #fontface to style.css - html

Question

I have a custom font I would like to use on a webpage. Specifically GT-Walsheim-Pro-Medium-Oblique.woff from:
https://andrewsonline.co.uk/content/fonts/
The style.css I am working with is this:
https://github.com/syunghong/veil/blob/master/css/style.css
How do I incorperate this font file using #fontface into my style.css file?
I have GT-Walsheim-Pro-Medium-Oblique.woff in a folder called fonts.

Answer 1

here
#font-face {
font-family: 'RobotoBold'; /*this is what you put on your font family*/
src: url('../fonts/Roboto-Bold.ttf'); /*Link to the font*/
}
to use it
p {
font-family: RobotoBold;
font-size: 14;
}

Answer 2

If you own the rights to use the webfont, take the original ttf or otf font and render a full set here at FontSquirrel. Different browsers prefer different font types, the older browsers are pickiest.
Then add the font to the top of your stylesheet so it's loaded first or even before the stylesheet inline if you see FOUT, "Flash of Unstyled Text". More info here but basically you want the font loaded and ready before your html starts loading.
Then load your font like this:
#font-face {
font-family: 'GT Walsheim Pro Medium Oblique';
src: url('GT-Walsheim-Pro-Medium-Oblique.eot');
src: url('GT-Walsheim-Pro-Medium-Oblique.eot?#iefix&v=4.6.3') format('embedded-opentype'),
url('GT-Walsheim-Pro-Medium-Oblique.woff2') format('woff2'),
url('GT-Walsheim-Pro-Medium-Oblique.woff') format('woff'),
url('GT-Walsheim-Pro-Medium-Oblique.ttf') format('truetype'),
url('GT-Walsheim-Pro-Medium-Oblique.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Font Squirrel will output the above code for you when you render the font package there.
Call the font in your css like this, I'm using your H titles as an example, make sure to always have a fallback for the font in case it errors or doesn't load for some reason:
h1, h2, h3, h4, h5, h6 {
font-family: 'GT Walsheim Pro Medium Oblique', arial, sans-serif;
}