How do I include this font in my HTML?

Question

I found a gorgeous font called Slim Joe on a webpage whose link I posted below.

Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.

Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.

The webpage where it's included:

http://presentation.creative-tim.com/ (where it says "creative tim")

How the font looks like:

https://befonts.com/big-john-slim-joe-font.html

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) — Dai, Feb 26 '18 at 21:34

Thomas Valadez · Accepted Answer · 2018-02-26T21:54:01.747

0

You can include fonts into your website by css @font-face rule. This requires having either the otf or ttf font file on your server. To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.

Declare it like

@font-face {
  font-family: john-slim-joe;
  src: url(myFontsFolder/john-slim-joe.ttf);
}

Use it like

p{
  font-family: john-slim-joe;
}

edited Feb 26 '18 at 21:54

answered Feb 26 '18 at 21:38

Thomas Valadez

1,697
2
22
27

Thank you! Just one more question, can the person using another machine (who doesn't own that font) see it in their browser as well? This is what was troubling me, I thought I needed it on a server – randomuser Feb 26 '18 at 21:40
yes, they will. Since your machine will be serving the `otf` or `ttf` file to them when they render your website. – Thomas Valadez Feb 26 '18 at 21:42
So the point is to upload the file on the server together with my webpage? – randomuser Feb 26 '18 at 21:47
Yes. You will have to upload the font-file to your server along with the html, css and other resources you want to display on your page. It is just the same as what you would do to serve images from your server. – Thomas Valadez Feb 26 '18 at 21:48

score 0 · Answer 2 · answered Feb 26 '18 at 21:40

To add a font to your website:

Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's @font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS @font-face Rule
After that, you can use the "font-family" property.

Hope this helps!

score 0 · Answer 3 · answered Feb 26 '18 at 21:47

The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:

<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />

On this file, you can see how they imported and declared Slim-Joe font.

@font-face {
    font-family: 'Slim-Joe';
    src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
    src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
    url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
    url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
    font-weight: normal;
    font-style: normal;
}

And usage by the nav bar css:

.navbar .navbar-brand {
    font-weight: 600;
    margin: 5px 0px;
    padding: 20px 15px;
    font-size: 20px;
    font-family: "Slim-Joe";
    letter-spacing: 0;
}

How do I include this font in my HTML?

3 Answers3