I installed several Google Fonts locally on a Windows box so that it will not have to connect to Google each time a website tries to use those fonts.
One of the fonts is Roboto, available from Google here: https://fonts.google.com/specimen/Roboto.
When I direct a web browser (Firefox) to open a web page that uses Roboto, it still goes to Google to download the font.
Here are two example URLs:
https://www.sitepoint.com/17-screencasting-tools-for-virtual-training/
https://www.belarc.com/
I figured that I possibly need to inject some CSS code to make this work, so I used userContent.css to inject some CSS into every page. Injecting the CSS code using a browser extension such as Stylus will have the same effect.
Here is the code I wrote:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
unicode-range: U+0-10FFFF;
src: local('Roboto-Regular');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
unicode-range: U+0-10FFFF;
src: local('Roboto-Italic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
unicode-range: U+0-10FFFF;
src: local('Roboto-Light');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
unicode-range: U+0-10FFFF;
src: local('Roboto-LightItalic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
unicode-range: U+0-10FFFF;
src: local('Roboto-Medium');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
unicode-range: U+0-10FFFF;
src: local('Roboto-MediumItalic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
unicode-range: U+0-10FFFF;
src: local('Roboto-Bold');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
unicode-range: U+0-10FFFF;
src: local('Roboto-BoldItalic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
unicode-range: U+0-10FFFF;
src: local('Roboto-Black');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
unicode-range: U+0-10FFFF;
src: local('Roboto-BlackItalic');
}
I see no errors in my code, but the site is still downloading the font from Google instead of using the locally installed font.
Where is my code failing, and how can my code be improved to make it work? Also, can my code be simplified in any way?
This one is working:
#font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
font-family: roboto-regular;
}
Important: make sure that the path (the './fonts/Roboto-Regular.ttf') is correctly point to your TTF file.
I've added the 'circular' font family to my site shown in the first code snippet below, but it doesn't add any bold, so I tried to include the bold .ttf and .woff for the bold 'circular' font but neither of my two approaches worked, the first approach made all the text bold and the second approach didn't do anything at all!
Here is how I added 'circular' to my asp.net mvc site's site.css file and it makes all the text circular, but not the bold
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
}
body {
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
color: #484848 !important;
}
Here I tried adding the bold but it makes everything bold
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
color: #484848 !important;
}
The last thing I tried was adding a new 'font-face' and including it in the body like this but it doesn't change any of my 'font-weight: bold' css to bold
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
}
#font-face {
font-family: 'Circular-bold';
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular, Circular-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
color: #484848 !important;
}
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
}
#font-face {
font-family: 'Circular'; /*same name, yes*/
font-weight: bold; /*config its weight*/
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular; /*select font family normally*/
font-weight: bold; /*select family's bold font face*/
}
Or ask engine to generate (ugly) bold font face for us by font-synthesis:weight.
Here is an example showing how googlefonts configs font face.
#font-face {
font-family: 'Spectral SC';
font-style: normal;
font-weight: 400;
src: local('Spectral SC Regular'), local('SpectralSC-Regular'), url(https://fonts.gstatic.com/s/spectralsc/v2/yJ95fCBFs0v33GTJdYTk_zUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
#font-face {
font-family: 'Spectral SC';
font-style: normal;
font-weight: 700;
src: local('Spectral SC Bold'), local('SpectralSC-Bold'), url(https://fonts.gstatic.com/s/spectralsc/v2/J7mO0YbtyrIkp56FY15FDS_vZmeiCMnoWNN9rHBYaTc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
below code'll work
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular;
font-weight: bold;
}
I've been trying for hours to use the Titillium Web custom font but haven't succeeded. Here's what I tried:
Adding the following line in the head part of the overall template
`<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700" rel="stylesheet">`
Adding the following in CSS
#font-face {
font-family: 'Titillium Web Bold';
src: url('data/fonts/TWeb/titilliumweb-bold-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-bold-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-bold-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-bold-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web BoldItalic';
src: url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web Italic';
src: url('data/fonts/TWeb/titilliumweb-italic-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-italic-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-italic-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-italic-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web Light';
src: url('data/fonts/TWeb/titilliumweb-light-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-light-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-light-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-light-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web';
src: url('data/fonts/TWeb/titilliumweb-regular-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-regular-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-regular-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-regular-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web Semibold';
src: url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-semibold-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-semibold-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
Using the font on an html element
a.random {font-family: 'Titillium Web';} or a.random {font-family: 'Titillium Web', sans-serif;}
None worked.
Any idea ?
Thanks
#import url('https://fonts.googleapis.com/css family=Titillium+Web:300,400,400i,600,600i,700');
#f{
font-family: 'Titillium Web', sans-serif;
}
#s{
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
}
#t{
font-family: 'Titillium Web', sans-serif;
font-style:italic;
font-weight: 700;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="f">Sample</p>
<p id="s">Another Sample</p>
<p id="t">Last Sample</p>
</body>
</html>
I want help on importing all of Google web font at once ,
I tested the normal 'link rel' in my head tag to import The Family Tangerine for my post and it worked perfectly.
Although i want a way in which i can import all the fonts available, so i can use them whenever i want , do i have to write them one by one or is there any full embedded link rel for all of them .
Pease help me out.
Hmm, it will result in an extremely large file being imported, and Google may even disallow it, but I guess you could select every font from the list. I've selected 101 of the fonts and it seems to work ok.
Go to https://fonts.google.com/ and start clicking every, single, font, and every, single, font weight (better get some food and drink ready, it might take a day or two) Google will provide a <link href="https://fonts.googleapis.com/css?family= with all the fonts appended. Add this to your page, then you can define the font-family for an element using any of the font names.
/*
font-family: 'Roboto', sans-serif;
font-family: 'Zilla Slab Highlight', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Spectral', serif;
font-family: 'Slabo 27px', serif;
font-family: 'Lato', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Zilla Slab', serif;
font-family: 'Montserrat', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Merriweather', serif;
font-family: 'Saira Condensed', sans-serif;
font-family: 'Saira', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Saira Semi Condensed', sans-serif;
font-family: 'Saira Extra Condensed', sans-serif;
font-family: 'Julee', cursive;
font-family: 'Archivo', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Lora', serif;
font-family: 'Manuale', serif;
font-family: 'Asap Condensed', sans-serif;
font-family: 'Faustina', serif;
font-family: 'Cairo', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Droid Serif', serif;
font-family: 'Noto Sans', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Droid Sans', sans-serif;
font-family: 'Arimo', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Sedgwick Ave Display', cursive;
font-family: 'Titillium Web', sans-serif;
font-family: 'Muli', sans-serif;
font-family: 'Sedgwick Ave', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Mada', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Noto Serif', serif;
font-family: 'Bitter', serif;
font-family: 'Dosis', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Oxygen', sans-serif;
font-family: 'Arvo', serif;
font-family: 'Hind', sans-serif;
font-family: 'Cabin', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Cairo', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Droid Serif', serif;
font-family: 'Noto Sans', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Droid Sans', sans-serif;
font-family: 'Arimo', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Sedgwick Ave Display', cursive;
font-family: 'Titillium Web', sans-serif;
font-family: 'Muli', sans-serif;
font-family: 'Sedgwick Ave', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Mada', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Noto Serif', serif;
font-family: 'Bitter', serif;
font-family: 'Dosis', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Oxygen', sans-serif;
font-family: 'Arvo', serif;
font-family: 'Hind', sans-serif;
font-family: 'Cabin', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Acme', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Mukta Vaani', sans-serif;
font-family: 'Play', sans-serif;
font-family: 'Cuprum', sans-serif;
font-family: 'Maven Pro', sans-serif;
font-family: 'EB Garamond', serif;
font-family: 'Passion One', cursive;
font-family: 'Ropa Sans', sans-serif;
font-family: 'Francois One', sans-serif;
font-family: 'Archivo Black', sans-serif;
font-family: 'Pathway Gothic One', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Vollkorn', serif;
font-family: 'Libre Franklin', sans-serif;
font-family: 'Crete Round', serif;
font-family: 'Alegreya', serif;
font-family: 'PT Sans Caption', sans-serif;
font-family: 'Alegreya Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
*/
<link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Acme|Alegreya|Alegreya+Sans|Anton|Archivo|Archivo+Black|Archivo+Narrow|Arimo|Arvo|Asap|Asap+Condensed|Bitter|Bowlby+One+SC|Bree+Serif|Cabin|Cairo|Catamaran|Crete+Round|Crimson+Text|Cuprum|Dancing+Script|Dosis|Droid+Sans|Droid+Serif|EB+Garamond|Exo|Exo+2|Faustina|Fira+Sans|Fjalla+One|Francois+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Julee|Karla|Lato|Libre+Baskerville|Libre+Franklin|Lobster|Lora|Mada|Manuale|Maven+Pro|Merriweather|Merriweather+Sans|Montserrat|Montserrat+Subrayada|Mukta+Vaani|Muli|Noto+Sans|Noto+Serif|Nunito|Open+Sans|Open+Sans+Condensed:300|Oswald|Oxygen|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|Pacifico|Passion+One|Pathway+Gothic+One|Play|Playfair+Display|Poppins|Questrial|Quicksand|Raleway|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Ropa+Sans|Rubik|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Sedgwick+Ave|Sedgwick+Ave+Display|Shadows+Into+Light|Signika|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Spectral|Titillium+Web|Ubuntu|Ubuntu+Condensed|Varela+Round|Vollkorn|Work+Sans|Yanone+Kaffeesatz|Zilla+Slab|Zilla+Slab+Highlight" rel="stylesheet">
An alternate, and much more performant solution, might be to use the Google Web Font Loader which allows you to load any of the Google fonts via JS. This would allo you to load ANY of the Google fonts, without loading ALL of the Google fonts.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"> </script>
<script>
WebFont.load({
google: {
families: ['Any Google Font']
}
});
</script>
You can import all Google Fonts to your website using the Easy Fonts library. All you have to do is import the following CSS file:
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
and, then use the fonts the way you want. Additionally, you can also use the font families and font weights using CSS classes as below:
<div class="font-lato w500i">
<a class="font-open-sans w700" href="https://google.com">Google</a>
</div>
Full class reference for each font family is available here.
You can load multiple google font's but you have to define font families for every font you want to import. You need to separate each font using '|' character.
<link href='//fonts.googleapis.com/css?family=Brawler|Ubuntu|Righteous' rel='stylesheet' type='text/css'>
I was using google api to get all fonts:
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
Copy only font family names. I was using VS Code and Regular Expression.
Replace space with + to build stylesheet link:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee|Abel|Abhaya+Libre|Abril+Fatface|Aclonica|Acme|Actor|Adamina|Advent+Pro|Aguafina+Script|Akaya+Kanadaka|Akaya+Telivigala|Akronim|Aladin|Alata|Alatsi|Aldrich|Alef|Alegreya|Alegreya+SC|Alegreya+Sans|Alegreya+Sans+SC|Aleo|Alex+Brush|Alfa+Slab+One|Alice|Alike|Alike+Angular|Allan|Allerta|Allerta+Stencil|Allura|Almarai|Almendra|Almendra+Display|Almendra+SC|Amarante|Amaranth|Amatic+SC|Amethysta|Amiko|Amiri|Amita|Anaheim|Andada|Andika|Andika+New+Basic|Angkor|Annie+Use+Your+Telescope|Anonymous+Pro|Antic|Antic+Didone|Antic+Slab|Anton|Antonio|Arapey|Arbutus|Arbutus+Slab|Architects+Daughter|Archivo|Archivo+Black|Archivo+Narrow|Aref+Ruqaa|Arima+Madurai|Arimo|Arizonia|Armata|Arsenal|Artifika|Arvo|Arya|Asap|Asap+Condensed|Asar|Asset|Assistant|Astloch|Asul|Athiti|Atma|Atomic+Age|Aubrey|Audiowide|Autour+One|Average|Average+Sans|Averia+Gruesa+Libre|Averia+Libre|Averia+Sans+Libre|Averia+Serif+Libre|B612|B612+Mono|Bad+Script|Bahiana|Bahianita|Bai+Jamjuree|Ballet|Baloo+2|Baloo+Bhai+2|Baloo+Bhaina+2|Baloo+Chettan+2|Baloo+Da+2|Baloo+Paaji+2|Baloo+Tamma+2|Baloo+Tammudu+2|Baloo+Thambi+2|Balsamiq+Sans|Balthazar|Bangers|Barlow|Barlow+Condensed|Barlow+Semi+Condensed|Barriecito|Barrio|Basic|Baskervville|Battambang|Baumans|Bayon|Be+Vietnam|Bebas+Neue|Belgrano|Bellefair|Belleza|Bellota|Bellota+Text|BenchNine|Benne|Bentham|Berkshire+Swash|Beth+Ellen|Bevan|Big+Shoulders+Display|Big+Shoulders+Inline+Display|Big+Shoulders+Inline+Text|Big+Shoulders+Stencil+Display|Big+Shoulders+Stencil+Text|Big+Shoulders+Text|Bigelow+Rules|Bigshot+One|Bilbo|Bilbo+Swash+Caps|BioRhyme|BioRhyme+Expanded|Biryani|Bitter|Black+And+White+Picture|Black+Han+Sans|Black+Ops+One|Blinker|Bodoni+Moda|Bokor|Bonbon|Boogaloo|Bowlby+One|Bowlby+One+SC|Brawler|Bree+Serif|Brygada+1918|Bubblegum+Sans|Bubbler+One|Buda|Buenard|Bungee|Bungee+Hairline|Bungee+Inline|Bungee+Outline|Bungee+Shade|Butcherman|Butterfly+Kids|Cabin|Cabin+Condensed|Cabin+Sketch|Caesar+Dressing|Cagliostro|Cairo|Caladea|Calistoga|Calligraffitti|Cambay|Cambo|Candal|Cantarell|Cantata+One|Cantora+One|Capriola|Cardo|Carme|Carrois+Gothic|Carrois+Gothic+SC|Carter+One|Castoro|Catamaran|Caudex|Caveat|Caveat+Brush|Cedarville+Cursive|Ceviche+One|Chakra+Petch|Changa|Changa+One|Chango|Charm|Charmonman|Chathura|Chau+Philomene+One|Chela+One|Chelsea+Market|Chenla|Cherry+Cream+Soda|Cherry+Swash|Chewy|Chicle|Chilanka|Chivo|Chonburi|Cinzel|Cinzel+Decorative|Clicker+Script|Coda|Coda+Caption|Codystar|Coiny|Combo|Comfortaa|Comic+Neue|Coming+Soon|Commissioner|Concert+One|Condiment|Content|Contrail+One|Convergence|Cookie|Copse|Corben|Cormorant|Cormorant+Garamond|Cormorant+Infant|Cormorant+SC|Cormorant+Unicase|Cormorant+Upright|Courgette|Courier+Prime|Cousine|Coustard|Covered+By+Your+Grace|Crafty+Girls|Creepster|Crete+Round|Crimson+Pro|Crimson+Text|Croissant+One|Crushed|Cuprum|Cute+Font|Cutive|Cutive+Mono|DM+Mono|DM+Sans|DM+Serif+Display|DM+Serif+Text|Damion|Dancing+Script|Dangrek|Darker+Grotesque|David+Libre|Dawning+of+a+New+Day|Days+One|Dekko|Dela+Gothic+One|Delius|Delius+Swash+Caps|Delius+Unicase|Della+Respira|Denk+One|Devonshire|Dhurjati|Didact+Gothic|Diplomata|Diplomata+SC|Do+Hyeon|Dokdo|Domine|Donegal+One|Doppio+One|Dorsa|Dosis|DotGothic16|Dr+Sugiyama|Duru+Sans|Dynalight|EB+Garamond|Eagle+Lake|East+Sea+Dokdo|Eater|Economica|Eczar|El+Messiri|Electrolize|Elsie|Elsie+Swash+Caps|Emblema+One|Emilys+Candy|Encode+Sans|Encode+Sans+Condensed|Encode+Sans+Expanded|Encode+Sans+Semi+Condensed|Encode+Sans+Semi+Expanded|Engagement|Englebert|Enriqueta|Epilogue|Erica+One|Esteban|Euphoria+Script|Ewert|Exo|Exo+2|Expletus+Sans|Fahkwang|Fanwood+Text|Farro|Farsan|Fascinate|Fascinate+Inline|Faster+One|Fasthand|Fauna+One|Faustina|Federant|Federo|Felipa|Fenix|Finger+Paint|Fira+Code|Fira+Mono|Fira+Sans|Fira+Sans+Condensed|Fira+Sans+Extra+Condensed|Fjalla+One|Fjord+One|Flamenco|Flavors|Fondamento|Fontdiner+Swanky|Forum|Francois+One|Frank+Ruhl+Libre|Fraunces|Freckle+Face|Fredericka+the+Great|Fredoka+One|Freehand|Fresca|Frijole|Fruktur|Fugaz+One|GFS+Didot|GFS+Neohellenic|Gabriela|Gaegu|Gafata|Galada|Galdeano|Galindo|Gamja+Flower|Gayathri|Gelasio|Gentium+Basic|Gentium+Book+Basic|Geo|Geostar|Geostar+Fill|Germania+One|Gidugu|Gilda+Display|Girassol|Give+You+Glory|Glass+Antiqua|Glegoo|Gloria+Hallelujah|Goblin+One|Gochi+Hand|Goldman|Gorditas|Gothic+A1|Gotu|Goudy+Bookletter+1911|Graduate|Grand+Hotel|Grandstander|Gravitas+One|Great+Vibes|Grenze|Grenze+Gotisch|Griffy|Gruppo|Gudea|Gugi|Gupter|Gurajada|Habibi|Hachi+Maru+Pop|Halant|Hammersmith+One|Hanalei|Hanalei+Fill|Handlee|Hanuman|Happy+Monkey|Harmattan|Headland+One|Heebo|Henny+Penny|Hepta+Slab|Herr+Von+Muellerhoff|Hi+Melody|Hind|Hind+Guntur|Hind+Madurai|Hind+Siliguri|Hind+Vadodara|Holtwood+One+SC|Homemade+Apple|Homenaje|IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|IBM+Plex+Serif|IM+Fell+DW+Pica|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica|IM+Fell+Double+Pica+SC|IM+Fell+English|IM+Fell+English+SC|IM+Fell+French+Canon|IM+Fell+French+Canon+SC|IM+Fell+Great+Primer|IM+Fell+Great+Primer+SC|Ibarra+Real+Nova|Iceberg|Iceland|Imbue|Imprima|Inconsolata|Inder|Indie+Flower|Inika|Inknut+Antiqua|Inria+Sans|Inria+Serif|Inter|Irish+Grover|Istok+Web|Italiana|Italianno|Itim|Jacques+Francois|Jacques+Francois+Shadow|Jaldi|JetBrains+Mono|Jim+Nightshade|Jockey+One|Jolly+Lodger|Jomhuria|Jomolhari|Josefin+Sans|Josefin+Slab|Jost|Joti+One|Jua|Judson|Julee|Julius+Sans+One|Junge|Jura|Just+Another+Hand|Just+Me+Again+Down+Here|K2D|Kadwa|Kalam|Kameron|Kanit|Kantumruy|Karantina|Karla|Karma|Katibeh|Kaushan+Script|Kavivanar|Kavoon|Kdam+Thmor|Keania+One|Kelly+Slab|Kenia|Khand|Khmer|Khula|Kirang+Haerang|Kite+One|Kiwi+Maru|Knewave|KoHo|Kodchasan|Kosugi|Kosugi+Maru|Kotta+One|Koulen|Kranky|Kreon|Kristi|Krona+One|Krub|Kufam|Kulim+Park|Kumar+One|Kumar+One+Outline|Kumbh+Sans|Kurale|La+Belle+Aurore|Lacquer|Laila|Lakki+Reddy|Lalezar|Lancelot|Langar|Lateef|Lato|League+Script|Leckerli+One|Ledger|Lekton|Lemon|Lemonada|Lexend|Lexend+Deca|Lexend+Exa|Lexend+Giga|Lexend+Mega|Lexend+Peta|Lexend+Tera|Lexend+Zetta|Libre+Barcode+128|Libre+Barcode+128+Text|Libre+Barcode+39|Libre+Barcode+39+Extended|Libre+Barcode+39+Extended+Text|Libre+Barcode+39+Text|Libre+Barcode+EAN13+Text|Libre+Baskerville|Libre+Caslon+Display|Libre+Caslon+Text|Libre+Franklin|Life+Savers|Lilita+One|Lily+Script+One|Limelight|Linden+Hill|Literata|Liu+Jian+Mao+Cao|Livvic|Lobster|Lobster+Two|Londrina+Outline|Londrina+Shadow|Londrina+Sketch|Londrina+Solid|Long+Cang|Lora|Love+Ya+Like+A+Sister|Loved+by+the+King|Lovers+Quarrel|Luckiest+Guy|Lusitana|Lustria|M+PLUS+1p|M+PLUS+Rounded+1c|Ma+Shan+Zheng|Macondo|Macondo+Swash+Caps|Mada|Magra|Maiden+Orange|Maitree|Major+Mono+Display|Mako|Mali|Mallanna|Mandali|Manjari|Manrope|Mansalva|Manuale|Marcellus|Marcellus+SC|Marck+Script|Margarine|Markazi+Text|Marko+One|Marmelad|Martel|Martel+Sans|Marvel|Mate|Mate+SC|Maven+Pro|McLaren|Meddon|MedievalSharp|Medula+One|Meera+Inimai|Megrim|Meie+Script|Merienda|Merienda+One|Merriweather|Merriweather+Sans|Metal|Metal+Mania|Metamorphous|Metrophobic|Michroma|Milonga|Miltonian|Miltonian+Tattoo|Mina|Miniver|Miriam+Libre|Mirza|Miss+Fajardose|Mitr|Modak|Modern+Antiqua|Mogra|Molengo|Molle|Monda|Monofett|Monoton|Monsieur+La+Doulaise|Montaga|Montez|Montserrat|Montserrat+Alternates|Montserrat+Subrayada|Moul|Moulpali|Mountains+of+Christmas|Mouse+Memoirs|Mr+Bedfort|Mr+Dafoe|Mr+De+Haviland|Mrs+Saint+Delafield|Mrs+Sheppards|Mukta|Mukta+Mahee|Mukta+Malar|Mukta+Vaani|Mulish|MuseoModerno|Mystery+Quest|NTR|Nanum+Brush+Script|Nanum+Gothic|Nanum+Gothic+Coding|Nanum+Myeongjo|Nanum+Pen+Script|Nerko+One|Neucha|Neuton|New+Rocker|New+Tegomin|News+Cycle|Newsreader|Niconne|Niramit|Nixie+One|Nobile|Nokora|Norican|Nosifer|Notable|Nothing+You+Could+Do|Noticia+Text|Noto+Sans|Noto+Sans+HK|Noto+Sans+JP|Noto+Sans+KR|Noto+Sans+SC|Noto+Sans+TC|Noto+Serif|Noto+Serif+JP|Noto+Serif+KR|Noto+Serif+SC|Noto+Serif+TC|Nova+Cut|Nova+Flat|Nova+Mono|Nova+Oval|Nova+Round|Nova+Script|Nova+Slim|Nova+Square|Numans|Nunito|Nunito+Sans|Odibee+Sans|Odor+Mean+Chey|Offside|Oi|Old+Standard+TT|Oldenburg|Oleo+Script|Oleo+Script+Swash+Caps|Open+Sans|Open+Sans+Condensed|Oranienbaum|Orbitron|Oregano|Orelega+One|Orienta|Original+Surfer|Oswald|Over+the+Rainbow|Overlock|Overlock+SC|Overpass|Overpass+Mono|Ovo|Oxanium|Oxygen|Oxygen+Mono|PT+Mono|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|PT+Serif+Caption|Pacifico|Padauk|Palanquin|Palanquin+Dark|Pangolin|Paprika|Parisienne|Passero+One|Passion+One|Pathway+Gothic+One|Patrick+Hand|Patrick+Hand+SC|Pattaya|Patua+One|Pavanam|Paytone+One|Peddana|Peralta|Permanent+Marker|Petit+Formal+Script|Petrona|Philosopher|Piazzolla|Piedra|Pinyon+Script|Pirata+One|Plaster|Play|Playball|Playfair+Display|Playfair+Display+SC|Podkova|Poiret+One|Poller+One|Poly|Pompiere|Pontano+Sans|Poor+Story|Poppins|Port+Lligat+Sans|Port+Lligat+Slab|Potta+One|Pragati+Narrow|Prata|Preahvihear|Press+Start+2P|Pridi|Princess+Sofia|Prociono|Prompt|Prosto+One|Proza+Libre|Public+Sans|Puritan|Purple+Purse|Quando|Quantico|Quattrocento|Quattrocento+Sans|Questrial|Quicksand|Quintessential|Qwigley|Racing+Sans+One|Radley|Rajdhani|Rakkas|Raleway|Raleway+Dots|Ramabhadra|Ramaraja|Rambla|Rammetto+One|Ranchers|Rancho|Ranga|Rasa|Rationale|Ravi+Prakash|Recursive|Red+Hat+Display|Red+Hat+Text|Red+Rose|Redressed|Reem+Kufi|Reenie+Beanie|Reggae+One|Revalia|Rhodium+Libre|Ribeye|Ribeye+Marrow|Righteous|Risque|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Rochester|Rock+Salt|RocknRoll+One|Rokkitt|Romanesco|Ropa+Sans|Rosario|Rosarivo|Rouge+Script|Rowdies|Rozha+One|Rubik|Rubik+Mono+One|Ruda|Rufina|Ruge+Boogie|Ruluko|Rum+Raisin|Ruslan+Display|Russo+One|Ruthie|Rye|Sacramento|Sahitya|Sail|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Saira+Stencil+One|Salsa|Sanchez|Sancreek|Sansita|Sansita+Swashed|Sarabun|Sarala|Sarina|Sarpanch|Satisfy|Sawarabi+Gothic|Sawarabi+Mincho|Scada|Scheherazade|Schoolbell|Scope+One|Seaweed+Script|Secular+One|Sedgwick+Ave|Sedgwick+Ave+Display|Sen|Sevillana|Seymour+One|Shadows+Into+Light|Shadows+Into+Light+Two|Shanti|Share|Share+Tech|Share+Tech+Mono|Shippori+Mincho|Shippori+Mincho+B1|Shojumaru|Short+Stack|Shrikhand|Siemreap|Sigmar+One|Signika|Signika+Negative|Simonetta|Single+Day|Sintony|Sirin+Stencil|Six+Caps|Skranji|Slabo+13px|Slabo+27px|Slackey|Smokum|Smythe|Sniglet|Snippet|Snowburst+One|Sofadi+One|Sofia|Solway|Song+Myung|Sonsie+One|Sora|Sorts+Mill+Goudy|Source+Code+Pro|Source+Sans+Pro|Source+Serif+Pro|Space+Grotesk|Space+Mono|Spartan|Special+Elite|Spectral|Spectral+SC|Spicy+Rice|Spinnaker|Spirax|Squada+One|Sree+Krushnadevaraya|Sriracha|Srisakdi|Staatliches|Stalemate|Stalinist+One|Stardos+Stencil|Stick|Stint+Ultra+Condensed|Stint+Ultra+Expanded|Stoke|Strait|Stylish|Sue+Ellen+Francisco|Suez+One|Sulphur+Point|Sumana|Sunflower|Sunshiney|Supermercado+One|Sura|Suranna|Suravaram|Suwannaphum|Swanky+and+Moo+Moo|Syncopate|Syne|Syne+Mono|Syne+Tactile|Tajawal|Tangerine|Taprom|Tauri|Taviraj|Teko|Telex|Tenali+Ramakrishna|Tenor+Sans|Text+Me+One|Texturina|Thasadith|The+Girl+Next+Door|Tienne|Tillana|Timmana|Tinos|Titan+One|Titillium+Web|Tomorrow|Trade+Winds|Train+One|Trirong|Trispace|Trocchi|Trochut|Truculenta|Trykker|Tulpen+One|Turret+Road|Ubuntu|Ubuntu+Condensed|Ubuntu+Mono|Ultra|Uncial+Antiqua|Underdog|Unica+One|UnifrakturCook|UnifrakturMaguntia|Unkempt|Unlock|Unna|VT323|Vampiro+One|Varela|Varela+Round|Varta|Vast+Shadow|Vesper+Libre|Viaoda+Libre|Vibes|Vibur|Vidaloka|Viga|Voces|Volkhov|Vollkorn|Vollkorn+SC|Voltaire|Waiting+for+the+Sunrise|Wallpoet|Walter+Turncoat|Warnes|Wellfleet|Wendy+One|Wire+One|Work+Sans|Xanh+Mono|Yanone+Kaffeesatz|Yantramanav|Yatra+One|Yellowtail|Yeon+Sung|Yeseva+One|Yesteryear|Yrsa|Yusei+Magic|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei|Zen+Dots|Zeyada|Zhi+Mang+Xing|Zilla+Slab|Zilla+Slab+Highlight">
Using a font from the google font library is essentially adding a style-sheet every time to your page that needs to be downloaded every time your site loads.
There's no shortcut to download all google fonts to a single website because the inefficiency of having a ginormous amount of CSS downloaded when your page is accessed simply isn't the best solution. Professional web developers have a specific font-stack for each website and only include those specific fonts used in that page. This is my suggestion.
I have used the CSS command
#font-face { font-family: myFont; src: url('MyFont.otf'); }
to install my own font on a HTML site.
Now, when I use the <strong> tag, I don't see a bold version of it. How do I do to make this work?
thanks.
You must create link on MyFontBold.otf . Italic, bold, medium, semibold, thin it's different files of font. Example
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
After this code you can use bold, italic and outher property of font
you can use font-weight..
#font-face {
font-family: "xyz";
src: url("xyz.ttf");
font-weight: bold;
font-style: italic, oblique;
}
use <b> bold </b> tag