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

10: How to Import New Fonts | Basics of CSS | Learn HTML and CSS | HTML Tutorial

1136 ratings | 79051 views
How to import new fonts | Basics of CSS | Learn HTML and CSS | HTML tutorial. In this lesson we will learn how to import new fonts into our website using HTML & CSS. We need to do this if we want to use fonts other than the ones we have available to us as a default. Link to all web safe fonts: https://www.w3schools.com/cssref/css_websafe_fonts.asp Link to Googles font library: https://fonts.google.com/ Link to Dafont for more free fonts: https://www.dafont.com/ ➤ GET ACCESS TO MY LESSON MATERIAL HERE! First of all, thank you for all the support you have given me! I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you! I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach. I hope you will find it helpful :) Material for this lesson: https://www.patreon.com/posts/html-10-download-15593559
Html code for embedding videos on your blog
Text Comments (90)
Lital R (1 hour ago)
Thanks! which one of the methods is better? If I'll link it from my computer (@font-face method) there's a chance that the font won't work on the browsers?
mmtuts (1 hour ago)
Not all fonts are made to work on websites. I usually link to the fonts online, which makes it certain that it's a font that will work.
Raees Kabir (1 day ago)
What platform is this and how do i do go to the style page on notepad?
lowrider993 (2 days ago)
i wanted to link fonts from dafont instead of google font
Kajol Soni (2 days ago)
it worked man i am so so so happy..... ; ) thanks
Matty Violin (2 days ago)
Not working for me :(
Manoj kumar (3 days ago)
nice video .
A.I.P. (5 days ago)
it dosent work
A.I.P. (4 days ago)
+mmtuts thanks I will try to do a different font
mmtuts (5 days ago)
Not all fonts are created to be used for websites. If you want to make sure that you are using a usable web font, try using the ones Google provide on fonts.google.com
Ahmed Hassan (22 days ago)
please continue the world need u :") many thanks <3
Joe sprague (1 month ago)
I tried to put a font called Lobster 1.4 inside my webpage and I can not get it to work I used the @font-face{ src: url(fonts/Lobster 1.4); font-family: 'Lobster 1.4'; } then I put it in the h3 tage with the font-family and it will not show up in the Lobster font any help would be great full thank you
Dylan Hodder (1 month ago)
Thanks for the tutorial! It really helped.
Jalal khan (1 month ago)
nice tutorial mate
ziad osman (1 month ago)
who is watching 2019
Hari Sai (1 month ago)
how to use of 700i ????
iTzJuanMa (1 month ago)
Hari Sai font-weight: 700; Font-style:italic;
radicalNoobSaibot (1 month ago)
I am in a great debt to you -- thank you very much.
Škola Nebezpečna (2 months ago)
Hi, nice tutorial. I have some issues. When I download font and paste it to css it works just on localhost. When I upload everything to FTP, it deosn't work. I would be glad for any help.
Yuma (2 months ago)
yashu garg (2 months ago)
when i download the font then its not working. Plz Help...
Mall Might (2 months ago)
My Teacher is itself not very good at HTL and gave us a task to "beautify" some texts. You just saved me! I will look forward watching you!
CHABA7 origiᴻal (3 months ago)
thaaaaaaaaaankkkkkkkkkkkkkk youuuuuuuuuuuuuuuuu i send to you a big up from morroco :VVV
Alexi Ivastinov (3 months ago)
How can we use multiple fonts in CSS after downloading these ?
ahmed sellami (3 months ago)
Thank you . This is the best tutorials . These are better than paid tutorials
Stefan Mrvic (3 months ago)
It's not working on Chrome
Darrell Lischka (3 months ago)
Awesome tutorials...Learning a lot so that i can actually apply the knowledge you are sharing....Thank you ...Cheers
NatMesh (4 months ago)
amazing, thanks brother!
kbye (4 months ago)
woah! I don't know but it sounds like the mic quality got so much better in this video compared to the last one :D Really awesome video
Shishir Poudel (5 months ago)
the way u describe every little things..out of box bro..damn u needa be a professor
Samuel Kekli (5 months ago)
best educator in youtube many thanks keep the good work
Nimas Atmaja (5 months ago)
thank you sooooooo much :")
Olivia Marcello (5 months ago)
love the tutorial! but how do I import two fonts under font-face?
Jerimiah Cook (5 months ago)
still can't find a thing for Anurati, how could I import the font with .woff and .woff2 files only? (if that's even possible, or do i have to find a .ttf file?)
Galaxy4Dayz (1 month ago)
convert it to a .ttf files (idk how to do that)
MylesAbroad (6 months ago)
Super helpful! Thx
Tyrone Slothdrop (7 months ago)
I'm using FIrefox ESR on Debian and neither of these methods are working.
Galaxy4Dayz (1 month ago)
i'm using safari and it works on one page of my website but not the other, i have done everything right but it's the matter of getting it on the second page of my website sigh+Tyrone Slothdrop
Tyrone Slothdrop (5 months ago)
I would try installing the current version of Firefox. Anything beyond that is above my knowledge base. https://linuxconfig.org/how-to-install-latest-firefox-browser-on-debian-9-stretch-linux
HugsForDrugs? (6 months ago)
Tyrone Slothdrop me too, did u find a solution?
Jason Maselli (7 months ago)
I've copied your instructions from this video exactly, but my page is still not loading the font? Please help: html file: <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Trip Around the USA on a Segway</title> <link href="https://fonts.googleapis.com/css?family=Modak" rel="stylesheet"> <link rel="stylesheet" href="journal.css"> </head> <body> <h1 class="Segway">Segway'n USA</h1> .css file: body{ font-family: Verdana, Geneva, Arial, sans-serif; } .Segway { font-family: 'Modak', cursive; }
Jorge Horacio Medina (7 months ago)
Maruf Ahmed (7 months ago)
Thank you so much
Alvin Rochafi (7 months ago)
Simple, to the point, easy to understand. You got new subscriber now :D
Shukang Yu (7 months ago)
Thank you!
Md Kawser Ahmed (7 months ago)
Thank you, boss!!!!!!!
MD FERDOWS (7 months ago)
Really helpful
cerys.emb (7 months ago)
Stud Stud (8 months ago)
can I use css variables with @import and @font-face
Syed Shahin Ahmed (8 months ago)
Hi, I need help. my paths are root> css> style.css and font paths are root>fonts> then the fonts. so when I am writing, src: URL (fonts/HanaleiFill-Regular.ttf); nothing works. how do I change paths of the font?​
Shehryar Ahmed (6 months ago)
../font name Or ../../font name
AJ Greenman (8 months ago)
I'm glad this guy actually gets right to the point
From my own experimentation, you don't need to import the specific font weights or styles from Google Fonts in order to use them. In fact I specifically chose a font that only had one style, and I was still able to change the weight and style of the font in my CSS with results.
Divine Zeal (9 months ago)
Google fonts!!! Thanks for sharing
reyven paragsa (9 months ago)
Hey Bruh ! What platform did you use ?
sandeep singh (10 months ago)
Thanks, It's a very useful tutorial for CSS Beginners, there is some less information about CSS Font read more about CSS Fonts http://www.gdatamart.com/css/css_fonts.aspx
Na Xu (10 months ago)
Your tutorials are easy to understand. Thanks very much. Hope you do more tutorials
Руслан Иванов (10 months ago)
Hi, thx for great tutorials, what kind of OS are u use?
Aishwarya Ratnam (11 months ago)
Thank you so so much.Your tutorial helped me a lot.Now it's been like am addicted to your playlist.
martin mtandi (11 months ago)
I thought having it locally on your machine makes it faster to load, its like bootstrap.. if u connect to bootstrap online it takes faster to load than wen its locally hosted
Forgotten Shadow (1 year ago)
What if I want to use the first method demonstrated but the font I want is on dafont.com?
manav mishra (9 months ago)
just use the second method
piano0011 Lee (1 year ago)
I placed the link at the bottom of the stylesheet and it still work but is it better to paste it on top?
Mahin Ashraf (1 year ago)
Thank you so much.
McCoder (1 year ago)
Great breakdown! Thank you!
Michael Esteves (1 year ago)
I don't really write comments in youtube videos, but yours deserve this! Thank you so much for your patience in teaching all of these.
Erika Copon (1 year ago)
How can i hqve different header font and body font? Thanks
Step-by-Step Science (1 year ago)
Thanks for the great video about fonts, I did not know about the dafonts website.  They have a lot of unique fonts.
Long Dang (1 year ago)
what if i want more fonts within my website? is there a possible way to do that? hope you have a solution
Long Dang (1 year ago)
nvm i found the solution. you have to make 2x @font-face: like this for instance: @font-face { src: url(fonts/comic.ttf); font-family: comic; } @font-face { src: url(fonts/GLECB.ttf); font-family: GLECB; }
NS Omar Faruk (1 year ago)
Jajakallhukhairan(May Allah give you best reaward).
Pranav Karthikeyan (3 months ago)
+dan choen not needed
dan choen (9 months ago)
his danish i don`t think your god means alot to him
EarlessBear (1 year ago)
Is this actually the way big website make their websites? So programming their site in kind of the way you do it? Thank you for respond and thank you for making these video's!
Ahmed Awad (1 year ago)
when i write <p class="paragraph"> the text don't appear on browser...when i add (#) <p class="#paragraph"> the browser reorganize and text appear
The Odd Hikikomori (7 months ago)
+Ahmed Awad check to see if your file name for your css file is right
Ahmed Awad (1 year ago)
here is my html txt <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML and CSS tutorial</title> <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Work+Sans" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <p class="paragraph">Now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.</p> </body> </html>
Ahmed Awad (1 year ago)
.paragraph { font-size: 50px; line-height: 62; font-family: 'Work Sans', sans-serif; font-family: 'Dancing Script', cursive; } i was following your footsteps if i try different browser dont even apear
mmtuts (1 year ago)
It seems you made an error when naming your class in the CSS file.
Mercy (1 year ago)
I usually would never modify my Fonts,, because i found it useless since I had fonts others didn't have and it wouldn't load for them. But this really helps! So thanks :D
Moe Bakry (1 year ago)
You are just amazing, easy effective way to learn. Many thanks can't give you what you deserve
katrinaxx (1 year ago)
Can you please make a review and rating system? It can build up on the login system that you did. Please I really need to learn.
Surin Farmwest (1 year ago)
Daniel, very useful as I have to use Thai fonts, thank you very much. West
Athul Joshi (1 year ago)
Thanks bro for coming back
Pak Home (1 year ago)
please bro make a video on how to create admin panel and chat system plz
Pakistani Gamer (1 month ago)
He already made them you can check them in php tus
Developers Era (5 months ago)
hey man, I am Suhail :)
Md Masud Rana (1 year ago)
your tutorial always helpful.
Enoch Hagan (1 year ago)
the best youtube channel ever!!!!!
Can’t wait for more tutorials. Please bro don’t stop again. Thanks a lot!!

Would you like to comment?

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