google font

font

CSS with Google Fonts : Oswald

CSS with Google Fonts : Open Sans

CSS with Google Fonts : Roboto

CSS with Google Fonts : Sofia

google font list : https://www.w3schools.com/howto/howto_google_fonts.asp
google font info : https://www.w3schools.com/Css/css_font_google.asp

Exported from Notepad++
<html> <head> <title>css Color</title> <link rel="stylesheet" type="text/css" href="../globalcss/style.css"> <!-- GOOGLE FONT : import in head section --> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> /*-- GOOGLE FONT : import in css section */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap'); .mgf1{ font-family: 'Oswald', sans-serif; } .mgf2{ font-family: 'Open Sans', sans-serif; } .mgf3{ font-family: 'Roboto', sans-serif; } .mgf4{ font-family: 'Sofia', sans-serif; } </style> </head> <body> <h1 class ="mgf1">CSS with Google Fonts : Oswald</h1> <h1 class ="mgf2">CSS with Google Fonts : Open Sans</h1> <h1 class ="mgf3">CSS with Google Fonts : Roboto</h1> <h1 class ="mgf4">CSS with Google Fonts : Sofia</h1> <p> google font list : https://www.w3schools.com/howto/howto_google_fonts.asp</br> google font info : https://www.w3schools.com/Css/css_font_google.asp </p> </body> </html>

css font

css font
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis lectus ac ipsum lobortis malesuada
Exported from Notepad++
<html> <head> <title>css Color</title> <style> .mfa { width: 400px; padding: 25px; border: 2px solid black; margin-bottom: 20px; <!-- Detail --> /* font-size: 1em; font-family: arial; line-height: 35px; <!-- space between the text --> font-weight: normal; font-style: oblique; <!-- normal | italic | oblique | initial | inherit --> font-variant: small-caps; */ <!-- normal | small-caps | initial | inherit --> /*shorthand*/ font: bold small-caps normal 1em/35px arial,verdana; } .mf { width: 400px; padding: 10px; border: 2px solid black; } .mf span{ font-size: 2em; } </style> </head> <body> <div class="mfa"> Lorem ipsum dolor sit amet, </div> <div class="mf"> Lorem <span>ipsum <span>dolor sit</span> amet</span>, consectetur adipiscing elit. Donec quis lectus ac ipsum lobortis malesuada </div> </body> </html>

font face

font-face

CSS @font-face Rule

CSS @font-face Rule

CSS @font-face Rule

CSS @font-face Rule

Ephesis-Regular @font-face Rule

DancingScript-Regular @font-face Rule

DancingScript-Bold. @font-face Rule

With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
Exported from Notepad++
<html> <head> <title>font-face</title> <style> @font-face { font-family: rajat; src: url(fonts/Ephesis-Regular.ttf); } @font-face { font-family: singh; src: url(fonts/DancingScript-Regular.ttf); } @font-face { font-family: negi; src: url(fonts/DancingScript-Bold.ttf); } /*-- bold font --*/ div{ font-family:rajat; font-size:30px; } .myfont1{ font-family:rajat; } .myfont2{ font-family:singh; } .myfont3{ font-family:negi; } .mff-a { font-family: "Times New Roman", Times, serif; } .mff-b { font-family: Arial, Helvetica, sans-serif; } .mff-c { font-family: "Lucida Console", "Courier New", monospace; } /*-- specific and right way --*/ .mff-d { font-family: openSans; } /*-- general --*/ </style> </head> <body> <h1 class="mff-a">CSS @font-face Rule</h1> <h1 class="mff-b">CSS @font-face Rule</h1> <h1 class="mff-c">CSS @font-face Rule</h1> <h1 class="mff-d">CSS @font-face Rule</h1> <h1 class="myfont1">Ephesis-Regular @font-face Rule</h1> <h1 class="myfont2">DancingScript-Regular @font-face Rule</h1> <h1 class="myfont3">DancingScript-Bold. @font-face Rule</h1> <div> With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore. </div> </body> </html>