HomeОбразованиеRelated VideosMore From: mjdwebdesign

HTML & CSS - Embedding custom fonts with @font-face

380 ratings | 79850 views
Don't like default fonts like Arial or, Helvetica? In this tutorial I'll go through how you can go about embedding your own custom fonts onto a website. Don't forget to leave your suggestions for future tutorials down in the comments. Keep me busy with these weekly videos, bare in mind I am restricted to HTML & CSS for now, thanks. It's a short and simple tutorial but nonetheless, hope it has helped at least one person out. :) Website: http://www.mjdwebdesign.co.uk • Twitter - http://www.twitter.com/mjdwebdesign • Dribbble - http://www.dribbble.com/mjdwebdesign • Facebook - https://www.facebook.com/mjdwebdesign • Facebook Community Page - https://www.facebook.com/matthew.dewhurst.75 If you have any feedback or suggestions feel free to leave them down in the comments section below. Thanks for watching - If you enjoyed this video or it helped you in any way please go ahead and hit that like button to support the video. To support and keep up to date with the channel be sure to subscribe if you haven't already. Alright, that's about it from me - I will see you, in the next one!
Html code for embedding videos on your blog
Text Comments (92)
Dais Heather (8 days ago)
Hi great video, however I'm new to HTML coding, would this type of coding work in e-newsletters such as mailchimp? I'm trying to embed a certain font into the newsletter but it won't work on all browsers. Thanks
Doggo (1 month ago)
Good video, helped me a lot, thanks.
Yami Shinigami (3 months ago)
Thank you soo much! Was working on my site for my artist page (www.keizerleon.com/linkz) And couldnt get it to work for the life of me... But with looking through the comments and heading to the site you told others to use it worked. So to everyone who's having issues i'd recommend going to the site: https://css-tricks.com/snippets/css/using-font-face/ And adding the woff & woff2 editions to it... Cause that worked for me! Thanks again :)
mjdwebdesign (22 days ago)
Hey Yami, Glad to hear you managed to get it working. Yeah, the CSS-Tricks @font-face article is extremely useful in understanding how you go about implementing @font-face and ensuring it's as compatible as it can be.
Farhaz 1807 (3 months ago)
It never works on chrome with mac
mjdwebdesign (22 days ago)
Hi Farhaz, You've probably already solved this by now but, I would simply recommend double checking your code. There shouldn't be any issues with @font-face and Chrome, unless you're on a very old version or are using an EOT font. https://www.w3schools.com/css/css3_fonts.asp Check out the W3Schools link above scroll down to see the 'Browser Support for Font Formats' and code examples.
Linko (4 months ago)
How would I do this if I’m using inline css
mjdwebdesign (22 days ago)
Although it's probably possible to do this with inline CSS (I've never tried), I would recommend against it. Stick to implementing @font-face within an external or internal stylesheet.
alyzah A (5 months ago)
Does it has to be an Otf file? or Ttf?
mjdwebdesign (4 months ago)
You can use OTF, TTF or both. Which font formats you decide to use all comes down to how compatible you want your website to be. To support most modern browsers, it's now recommended that you use the WOFF format. If you want to be compatible for a wider variety of browsers, you'll want to use a multitude of formats. This is something I should have covered in the tutorial and will cover if I decide to create an updated version of this tutorial. Have a look at CSS-Tricks article about @font-face for more information about the syntax and compatibility below: https://css-tricks.com/snippets/css/using-font-face/
Humma Irshad (7 months ago)
I doesn't work on my code editor. I use Visual Studio Code.
mjdwebdesign (5 months ago)
It doesn't work on your code editor? Which editor you use shouldn't make any difference as to whether this works or not.
Yash Raj Arora (9 months ago)
your British accent is awesome !
ujusogay (1 year ago)
Knowledge is timeless. Your 2014 tutorial is helping a lot a 2018 learner!!! Thank you so much!!!!!! ♡
mjdwebdesign (6 months ago)
I know, it's crazy. Knowledge might be timeless but code ain't. Sooner or later this will, more than likely, become obsolete.
Yigit Can Diri (1 year ago)
doesnt work for me did you do anything besides you showed at video
mjdwebdesign (6 months ago)
Nope. Take a look at these: https://jsfiddle.net/mjdwebdesign/doLzsrba/3/ https://css-tricks.com/snippets/css/using-font-face/
Kearfy (1 year ago)
doesn't work in chrome for me
mjdwebdesign (6 months ago)
Have a read, should be useful. https://css-tricks.com/snippets/css/using-font-face/
Rafael Colmanetti (1 year ago)
Thanks for the video, even I thought was a bit long, it worked perfectly for me! Cheers!
mjdwebdesign (6 months ago)
Perfectly acceptable criticism. I agree, it could be shorter. There's also a lot of useful information I didn't cover in this tutorial around browser compatibility. Something that, if I was to make this tutorial again, I would include.
Tech Shab (1 year ago)
thank you so much
DanielS (1 year ago)
Hi, nice tutorial, but i have a problem. The problem is that, i try to change the second code of @font-face to another font, but when i run it, the second font which is different from first font alot does not appear. How can i put different fonts?
mjdwebdesign (6 months ago)
Take a look at this JSFiddle I've put together.https://jsfiddle.net/mjdwebdesign/doLzsrba/3/ It's also worth checking out this article from CSS-Tricks as they go into more detail about browser compatibility. https://css-tricks.com/snippets/css/using-font-face/
Leclerc Dany (1 year ago)
Hi just wondering if this would work to generate a barcode using Code 39 ?
mjdwebdesign (6 months ago)
Not gonna lie. I have absolutely no idea - probably not..?
Jayden Budden (1 year ago)
How is all of yours working, i have used both firefox and internet explorer and windows edge and i have used as many font formats as i could find, and it still wont work!
mjdwebdesign (6 months ago)
Hi Jayden. Did you manage to get your head around this?
donor 938 (1 year ago)
Where did u get those files.. i mean i downloaded a font which is called Dudu_calligraphy and i placed the file in the folder with the .html file but i can't seem to embed it .. i even tried coping the exact same codes as you write them..
toto tata (1 year ago)
video starts at 1:40 thank me later
mjdwebdesign (6 months ago)
Dat 1 minute 40 second intro doe!
Soda 🇵🇷 (1 year ago)
I'm new to HTML and CSS coding. How do i use 2 custom fonts instead of 1? Do i make 2 style.css files? What do i do?
mjdwebdesign (6 months ago)
Hi Soda, I'm sure you've figured this out by now but, there's no need to have multiple CSS files. Just declare a new @font-face in the same CSS file with a different font family name. Obviously, the directory will need to point to the location of the second font too.
david42na (1 year ago)
I made the exact same thing only with different fonts and it doesn't work for me :( any suggestions?
mjdwebdesign (1 year ago)
Hi David, The fact you have used different fonts won't make a difference. You have probably already fixed your issue by now but I would advise double checking over your code to ensure that you haven't missed anything out. Check your other code too, not just the navigation. If you have errors elsewhere in your code this can cause problems when it comes to displaying the navigation too.
Hejar Khalid (2 years ago)
Never ever give a font-weight when using @fontface if you already have a bold font file! font-weight should always be set to normal.
mjdwebdesign (2 years ago)
Thanks for the info, I'll look into it.
John Madden (2 years ago)
mjdwebdesign (2 years ago)
Cartime (2 years ago)
Thanks so much for making this video! Very simple and understandable.
wodedailihaile (2 years ago)
what is this app?
mjdwebdesign (2 years ago)
If you're referring to what I'm coding with, it's called Sublime Text 2 in this video.
Ian Murray (2 years ago)
mjdwebdesign (2 years ago)
I agree.
Arjay Pogoy (2 years ago)
i have Cairo and doesn't even have the actual name -_-
mjdwebdesign (2 years ago)
Erm, I don't follow? Run that by me again...?
Justin Robinson (2 years ago)
the video should start at 1:50
redbug (5 months ago)
miranda c (2 years ago)
It really should. I think that's an excellent suggestion. I think that there's a number of seconds in that duration that really do not need to be there. I think, in other words, it just goes on a bit too long. I guess I'm not entirely sure, but I have a feeling that's true -- at any rate, it is how I feel right now, and while I was (obviously) thinking that that could be the case while I was watching the first two minutes of the tutorial, seeing your comment made me realize that in fact I could have been correct in my impression. In short, I had a hazy sense that I was losing two minutes of my life, but this was solidified -- reified, if you like -- upon reading some of the comments, especially yours, in the space under the videoscreen where the comments are (including this one that I'm typing right now).
mjdwebdesign (2 years ago)
+Justin Robinson agreed. :D
Jesse Murphy (2 years ago)
Please give a tutorial on how to add fonts into mailchimp
mjdwebdesign (2 years ago)
+Jesse Murphy I will try and look into it. Mailchimp is not something I have used before so it's new to me.
Dylan (3 years ago)
How do you get the eot file I am confused because I have a font and I can follow the steps ok it's just when you get to scr= I am not sure what to do at that bit becuase I know scr means the link but I don't know what link. Help??
mjdwebdesign (3 years ago)
+Dylan here's the code for embedding fonts - https://jsfiddle.net/mjdwebdesign/5yuqcktx/ When using "src" you just need to provide the CSS with a file path to where your font is stored and of course, the file extension would be .eot rather .ttf or .otf You would also need to change the format to "embedded-opentype" rather than say truetype or opentype. Here's another page which might help - https://css-tricks.com/snippets/css/using-font-face/
Noah R. (3 years ago)
But nobody else can see it. It's only for you to see, right? I can't get it to work.
mjdwebdesign (3 years ago)
+Noah R. if you're using Codepen then the best idea's I'd have is to use Google Font's quick use feature or link to a font used on another website directly.
Noah R. (3 years ago)
+mjdwebdesign OK, cool. So what if I use a program like Codepen? Get back to me when you can, but get some sleep too lol.
mjdwebdesign (3 years ago)
+Noah R. ok, here's the code for embedding a font - https://jsfiddle.net/mjdwebdesign/5yuqcktx/ - scan through and see where you may have gone wrong. The font you are embedding of course needs to on the server along with your website.
mjdwebdesign (3 years ago)
+Noah R. everyone can see the font. The idea is that the font can be found from the website's files therefore you can just find it and place it onto a webiste. It doesn't matter if the user doesn't or does have the font installed, it will always show up as it's stored witin your own files on the server - if that makes sense. It's actually 1:30am for me right now so I'll get back to you here with the code for embedding fonts later on today.
Cecily Chia (3 years ago)
Thank You So Muchhhhhhh :***
CYNICAL // (3 years ago)
subscribed, you have potential ;)
Spryx (3 years ago)
+mjdwebdesign follow some entrepreneur's on instagram and get a feel of the "royal" life :D works for me :D recommend whatchanish
mjdwebdesign (3 years ago)
I know, I know. :/
CYNICAL // (3 years ago)
You should
mjdwebdesign (3 years ago)
+CYNICAL // thank you. If only I had the motivation to go along with it.
The Salami (3 years ago)
Well somebody here likes Overwerk!
The Salami (3 years ago)
mjdwebdesign (3 years ago)
I'm sure I'll find the time to have a little nosey. :)
The Salami (3 years ago)
That's really funny. The Nth Degree's album cover can be labeled under abstract. I do really enjoy their music though. You might like them!
mjdwebdesign (3 years ago)
+The Salami I had to actually Google what Overwerk was hahah. Just found the image labelled under abstract and downloaded it.
Nirmal Singh (3 years ago)
how to generate web font and how to call
mjdwebdesign (3 years ago)
+nirmal singh I don't quite understand, sorry?
Asif Imtiaz Ahmed (3 years ago)
Hi, Your tutorial is very good, but I was really looking for a way to see how to implement font-face for real. I mean uploading the font to a folder in my theme and editing the style.css file. I wanted to know exactly where to place the font file in folder and what to type in the src= ('url'); please let me know if possible. Thanks!!
mjdwebdesign (3 years ago)
+Asif Imtiaz Ahmed I'm going to start getting back into producing more videos soon. Just been quite lazy with Youtube and all recently. :/ I'll add your suggestion to the list I have.
Asif Imtiaz Ahmed (3 years ago)
+mjdwebdesign​ wow, didn't know all that! I'm just learning and trying it out as I go.. thank you v.much.. I'll be sure to check out your other videos, I'm sure I'll get to learn more stuff. Do you have any tutorials on the new html animations? Just an idea I was thinking of learning it, if I can find a proper tutorial.
mjdwebdesign (3 years ago)
+Asif Imtiaz Ahmed you don't need to worry about where the code is placed within the CSS file. Linking to file locations is the same for both HTML and CSS. If the file you are using is in the same folder as the CSS or HTML file you would just use - ('file-here'). If your file is another folder you use a forward slash to go forward a folder, example: ('files/fonts/font-name.ttf') OR ('files/images/image-name.png'). Then, to go backwards through folders you would use " ../ " exmaple: ('../files/font-name.ttf') OR ('../files/image-name.png'). If this doesn't help, have a read of this article from CSS-Tricks: https://css-tricks.com/quick-reminder-about-file-paths/
Asif Imtiaz Ahmed (3 years ago)
Hi thanks for the quick reply.. I figured it out actually. In the src: ('file-location') I tried inserting a url to the file such as http://www.... etc but that didn't work. Then I tried putting the address like I saw in some other place like ('../themefolder/font.otf'); that might have worked but I guess my font name was incorrect. Later on I simply copied the font.otf file to the child theme folder (i was editing the child.css) and simply put url ('font.otf'); and it worked!!. I guess the learning for me is that the way file location is mentioned is different in css than how it's done in html. Another unfounded confusion I had was, where in style.css should I place the code so that it's read first. But I guess that doesn't matter since u put it at the bottom (of ur css file) and it worked and I put it at first and still it worked. Again, Thanks a lot for the prompt reply! Really appreciate it.
mjdwebdesign (3 years ago)
+Asif Imtiaz Ahmed The font can be placed any where in your project's folders. There isn't a place the font HAS to be placed. As long as @font-face{ src: url('font-location-here'); } directs the CSS to the correct place to find the font. I'm a little confused about your question but hope this helps. If you need any futher help just let me know.
Jelique Edward (4 years ago)
Thanks man. This is really useful information. Quick question though; when your linking the font files in the CSS file, they do have to be saved on your computer right ? Or have I missed something ?
mjdwebdesign (4 years ago)
+Jaycee Eee no worries and yes, I'm pretty sure they need to be local on your computer. You might be able to link to the font directly using a URL, I haven't tried it though. Google Fonts gives you the option to add a font without downloading it though. You have to copy and paste some JS and stuff though.
Edgard diahombela (4 years ago)
could you do something about video gallery or images gallery. I'd like to have the picture shown when the "hover" is on a button or the thumnail, for exemple. if you understand what I mean...
mjdwebdesign (4 years ago)
+Edgard diahombela I'll see what I can do. I think this is more towards the JavaScript / jQuery ends of things but I might be able to find some pre-written code somewhere and knock something up. Just give me some time as I have multiple things to do nowadays.
Jorge S (4 years ago)
Do a tutorial on how to add videos to a website please! . Awesome videos . 
Audrick Rodano (1 year ago)
go to youtube... then go to a video of your choice... then click share, then embed, then you copy the code to the script! XD
Calatz Ops (4 years ago)
Great vid man!. Will u make tuts on how to use SASS preprocessor or HAML, or jekyll
mjdwebdesign (4 years ago)
+Calatz Ops I've not worked with them before but I'll see what I can do.
Night staR (4 years ago)
:D new video with an awesome idea! 
DarkestGinge (4 years ago)
Never even thought about doing custom fonts, what a splendid idea and tutorial to support it!
mjdwebdesign (4 years ago)
+DarkestGinge :)
ietsization (4 years ago)
I would love to learn about cookies!
mjdwebdesign (4 years ago)
+ietsization Never looked into them before but I might be able to do some research into them and knock something up.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.