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

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

827 ratings | 57068 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 (65)
CHABA7 origiᴻal (1 day ago)
thaaaaaaaaaankkkkkkkkkkkkkk youuuuuuuuuuuuuuuuu i send to you a big up from morroco :VVV
Alexi Ivastinov (4 days ago)
How can we use multiple fonts in CSS after downloading these ?
ahmed sellami (12 days ago)
Thank you . This is the best tutorials . These are better than paid tutorials
Stefan Mrvic (21 days ago)
It's not working on Chrome
Darrell Lischka (28 days ago)
Awesome tutorials...Learning a lot so that i can actually apply the knowledge you are sharing....Thank you ...Cheers
NatMesh (1 month ago)
amazing, thanks brother!
kbye (1 month 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 (2 months ago)
the way u describe every little things..out of box bro..damn u needa be a professor
Samuel Kekli (2 months ago)
best educator in youtube many thanks keep the good work
Nimas Atmaja (2 months ago)
thank you sooooooo much :")
Olivia Marcello (2 months ago)
love the tutorial! but how do I import two fonts under font-face?
Jerimiah Cook (2 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?)
MylesAbroad (3 months ago)
Super helpful! Thx
Tyrone Slothdrop (4 months ago)
I'm using FIrefox ESR on Debian and neither of these methods are working.
Tyrone Slothdrop (2 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? (2 months ago)
Tyrone Slothdrop me too, did u find a solution?
Jason Maselli (4 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 (4 months ago)
thanks
Maruf Ahmed (4 months ago)
Thank you so much
Alvin Rochafi (4 months ago)
Simple, to the point, easy to understand. You got new subscriber now :D
Shukang Yu (4 months ago)
Thank you!
Md Kawser Ahmed (4 months ago)
Thank you, boss!!!!!!!
MD FERDOWS (4 months ago)
Really helpful
cerys.emb (4 months ago)
THANK YOU
Stud Stud (5 months ago)
can I use css variables with @import and @font-face
Syed Shahin Ahmed (5 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 (3 months ago)
../font name Or ../../font name
AJ Greenman (5 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 (6 months ago)
Google fonts!!! Thanks for sharing
reyven paragsa (6 months ago)
Hey Bruh ! What platform did you use ?
sandeep singh (7 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 (7 months ago)
Your tutorials are easy to understand. Thanks very much. Hope you do more tutorials
Hi, thx for great tutorials, what kind of OS are u use?
Aishwarya Ratnam (8 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 (8 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 (9 months ago)
What if I want to use the first method demonstrated but the font I want is on dafont.com?
ManKO360 (6 months ago)
just use the second method
piano0011 Lee (9 months 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 (9 months ago)
Thank you so much.
McCoder (10 months ago)
Great breakdown! Thank you!
Michael Esteves (10 months 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 (11 months ago)
How can i hqve different header font and body font? Thanks
Step-by-Step Science (11 months 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; }
Islam Channel (1 year ago)
Jajakallhukhairan(May Allah give you best reaward).
Pranav Karthikeyan (13 days ago)
+dan choen not needed
dan choen (6 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 (4 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
Developers Era (2 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.