Adding custom font using @fontface to style.css

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.

Possible duplicate of [How to add some non-standard font to a website?](https://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website) — Steve, Aug 17 '17 at 03:51
Right, im just not sure where to put @fontface within what I already have though...where does it go - exactly? — , Aug 17 '17 at 03:53
Before index? And does that mean I need to remove anything from: `html, body { height: 100%; width: 100%; margin: 0; color:#111111; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size:21px; font-weight:300; letter-spacing:0.1px; word-spacing:0.5px; }` — , Aug 17 '17 at 03:55

JkAlombro · Answer 1 · 2017-08-17T03:54:35.510

0

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;
}

edited Aug 17 '17 at 03:54

answered Aug 17 '17 at 03:53

JkAlombro

1,696
1
16
30

Thanks, im just not sure where to put @fontface within what I already have though...where does it go - exactly? In: https://github.com/syunghong/veil/blob/master/css/style.css – Aug 17 '17 at 03:54
edited it with example :) Edit:. I messed up, it is RobotoBold, not RobotoMedium.. Already edited it anyway. – JkAlombro Aug 17 '17 at 03:55
Hey thanks. Im just not sure how to incorperate this with what im already using, which is https://github.com/syunghong/veil/blob/master/css/style.css – Aug 17 '17 at 04:09

score 0 · Answer 2 · answered Aug 17 '17 at 03:55

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;
}

Thanks! And im putting this at the top of the css file here: https://github.com/syunghong/veil/blob/master/css/style.css? — , Aug 17 '17 at 04:04
Yes but it doesn't look like it will render there, but will render on a webserver or GitHub custom web page. — Nathaniel Flick, Aug 17 '17 at 04:18
I mean, where am I literally putting @fontace within this style.css? — , Aug 17 '17 at 14:08
Yes at the very top. Always load the fontface as soon as you can, that usually means either top of the css file or inline in the head (depends on what works best for your situation). — Nathaniel Flick, Aug 18 '17 at 18:35

Adding custom font using @fontface to style.css

2 Answers2