Page is not wrapping whole web content in react js - html

screenshot
I have included snippet of css code of html tag.
content of page is not wrapped, there are some blank space at the end of height and also width
html {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: rgb(30, 30, 30);
zoom: 0.95;
padding: 0px;
}

Related

how can i change the color of a placeholder of an html5 input area using css [duplicate]

This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Closed 9 days ago.
I'm trying to change the colour of a input area placeholder in html5 using a separate CSS stylesheet but it's not working
#Search {
margin: auto;
display: block;
background-color: royalblue;
color: white;
border-radius: 2500px;
border: 3px solid white;
padding: 20px;
font-size: 30px;
font-weight: 300;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
::placeholder {
color: white;
<div>
<h1 id="Start"> webui </h1>
</div>
<br>
<input type="text" id="search" placeholder="Search" />
I tried the codes but it didn't work I also tried a web kit but I'm not sure if I did it write and I'm a beginner

input::placeholder
input::placeholder {
color: red;
}
<h1 id="Start"> webui </h1>
<input type="text" id="search" placeholder="Search" />

There is a pseudoclass that does this.... but you have to use it separately.
#search {
margin: auto;
display: block;
background-color: royalblue;
color: white;
border-radius: 2500px;
border: 3px solid white;
padding: 20px;
font-size: 30px;
font-weight: 300;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#search::placeholder {
color: red;
}

Weird arch shape rendered whenever an "s" or "c" is followed by a "t" or "p" on iPad

Whenever there is an "st" or a "ct" there is a super weird arch that comes up, spanning from the top of the "c"/"s" and looping up and over to descend upon the "t". This really won't make sense without a picture.
Screenshot with lots of examples of the problem :
And the fonts:
style.css
12: font-family: "Open Sans", sans-serif;
17: font-family: "TTNorms";
25: font-family: "TTNorms-bold";
33: font-family: "NoeDisplay-Bold";
41: font-family: 'TTNorms', arial, sans-serif;
46: font-family: 'TTNorms-bold', arial, sans-serif;
51: font-family: 'NoeDisplay-Bold', 'Times New Roman', Serif !important;
93: font-family: 'TTNorms-bold', arial, sans-serif;
110: font-family: 'TTNorms', arial, sans-serif;
223: font-family: 'TT Norms', Arial, Sans-Serif;
312: font-family: "Poppins", sans-serif;
628: font-family: "Poppins", sans-serif;
942: font-family: "Poppins", sans-serif;
1006: font-family: "Roboto", sans-serif;
1474: font-family: "Poppins", sans-serif;
1530: font-family: "Roboto", sans-serif;
1578: font-family: #083B36;
1846: font-family: "Roboto", sans-serif;

How can i import all google font at once?

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.

CSS bottom bar isn't correctly shown with chrome

I have a bar on the bottom of my webpage and the code is the following:
<div class="casa5">
<label style="margin:auto;"><font color="orange">★</font> my text <font color="orange">★</font></label>
</div>
And here you can see the CSS:
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position:absolute;
left: 0;
right: 0;
text-align:center;
font: 90% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
}
This div is displayed in the bottom of the page as you can see here:
I am using firefox. By the way I am in trouble because when I open the page with Chrome, I have this view:
As you can see, when you open the page with Firefox, the bar lies on the bottom of the page, but when I load the same page with Chrome, where is a gap between my div and the bottom.
I want the bar to be displayed on the bottom of the page only when I scroll down until the end. How could I fix this?

You just need to add bottom: 0 to your css:
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position:absolute;
left: 0;
right: 0;
text-align:center;
font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
bottom: 0;
}
Also, you should probably change position:absolute; to position: fixed; for it to always be at the bottom whether the user scrolls or not.
Fiddle
However, if you would like for it to always be at the end of the page, you can do something like this:
html {
position: relative;
}
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position: absolute;
left: 0;
right: 0;
text-align:center;
font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
bottom: 0;
}
It changes the html to position: relative and keeps the footer at position: absolute
Fiddle
As suggested by http://mystrd.at/modern-clean-css-sticky-footer/

Try adding bottom: 0; to your CSS.
Working fiddle: http://jsfiddle.net/gzX7y/

FireFox not rendering font correctly

Can someone tell me why FireFox is not rendering the Lucida Sans Unicode font type? It's a default websafe font according to w3schools. Chrome and IE both render it fine.
html, body {
height: 100%;
font-size: 100%;
min-width: 950px;
color: #000;
font: normal 12px "Lucida Sans Unicode" Geneva, Tahoma;
}

You probably want a comma after the Lucida part:
html, body {
height: 100%;
font-size: 100%;
min-width: 950px;
color: #000;
font: normal 12px "Lucida Sans Unicode", Geneva, Tahoma;
}
http://jsfiddle.net/GVCy2/