How To Apply The Google Fonts - Science/Technology - Nairaland
Nairaland Forum / Science/Technology / How To Apply The Google Fonts (55 Views)
"The Algorithm Is Person!!", Cried The Google Engineer. / Location Of A Village Or Town In The Google Map / Applications Now Open For The Google Web And Android Scholarship (2) (3) (4)
(1) (Reply)
| How To Apply The Google Fonts by Palash369: 6:52am On Jun 26 |
Google boasts of including ‘hundreds of fonts’ that can be used when creating a website. But, how do you utilize them as and when you are working on a certain project?Well, this is what we are going to try and cover in this article here and a lot more along with it. [https://rabbitloader.com/articles/best-google-fonts/]What is a Google Font[https://rabbitloader.com/articles/best-google-fonts/? Technically speaking, the Google font is basically a collection of interactive application programming interfaces that enable the users to apply the web fonts for their websites. Not surprisingly, the Google fonts are absolutely free for public use along with the bandwidth. NOTE: [/b]One can use the Fonts only over the internet and cannot be installed locally, also they work only through your browser. The Google Fonts were launched in 2010 and soon grew to become the largest open-sourced, free collection of Fonts available over the internet. Also, the Google Fonts website allows the users to access and use the Fonts easily for their website. [b]The Google Fonts: Who are they Meant For? The best part about the Google Fonts is that practically ‘anyone’ can use it with much ease. Some of the much visited users include the likes of: UX designers, Graphic Designers, Developers, researchers, Social Media managers, Bloggers, Photographers and more. It is also easy to spot the application of the google Fonts in your everyday life in Billboards, wedding invitations, presentation decks, posters, books and what websites z. How To Use the Google Fonts for your Website Let us now get started with how to use the Google Fonts for your website: 1. Navigate over to the Google Fonts Website From here, the user will be able to select from over 853 Font options. You can also use the filter to best customize your choice based on Style, Popularity, Languages, Weight. 2. Next Locate the Fonts You prefer You can directly locate your font of choice, if you know the ‘Font Family’ name, here. 3.Next Click on (+) once you are ready to use it Every Font family comprises the (+) option located at the upper right hand corner. Click on this option and add this Font Family over to the ‘Selection Drawer’ that is displayed at the very bottom of the screen. 4. Now, repeat the steps from 1-3 if you wish to search for more than one Font to use. 5. Next click on the ‘Selection drawer’ to display all the fonts that you have selected. This is the place where you can take a better view on all the fonts added by you. Here, you can also find the code to add over to your website. Also, you can simply download the fonts on to your website. 6. The ‘Selection Drawer’ is where you can ‘pick’ the code to Copy and Paste within your websites CSS and HTML code. It is at the Selection drawer that the user can copy and paste the code onto the CSS and HTML. To be able to allow the Google Fonts to work, it is required that the user has Google Fonts API within the HTML to be linked with both the font family. Also, make sure to specify the font family in the CSS. 7. You can Add Various Styles and Weights If Required by selecting the ‘Customize’ option. It is here that you can finally add the various font styles and Weights onto the font families, before you proceed to add them to your website. However, keep in mind to add only those Fonts and Weights that you think you require. This is mainly because the more fonts you add, slower will be the load time on your site. 8. Next, Copy the HTML code and paste it on to the <head> of the website. Now, we have almost come to the end of How To Apply the Google Fonts. All you need to do is copy and paste the HTML and CSS code onto the website. To do this, you need to first copy the HTML link over to the <head> of the HTML document. 9. Now copy the CSS rule and paste it on to the CSS file of your website. Lastly, all you need to do now is copy and paste the CSS rules onto the CSS file. In case you prefer to add just a single Google Font, you can do so by simply adding the CSS font family rules onto the body tag. If not, you need to ensure that you are adding it on to the right elements within the CSS files. 10. LAstly, Save After all the steps have been followed, you simply have to save both the CSS and HTML files and then refresh the website. Finally, at this step you can view the new font. CONCLUSION So, there you have it friends, this is all that is needed on How To Apply the Google Fonts. Was this article helpful? Do let us know in the space below and we would love to hear from you. |
(1) (Reply)
What Are The Premium Features Of Binance Clone Script? / Introducing Windows Dedicated Server Hosting! / Navigating The Online Shopping Wave: BNPL Apps Unveiled
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 23 |