Font supported by all web browsers and mobile devices
Question
I have a
tag where the font for the text to be displayed is "Lato". I have mentioned it in my CSS code. The problem is it's not displaying text in font "Lato" when hosting it in different laptops or mobile phones. It's working properly only in my device. So how to set fonts globally so that my webpage using my fonts exactly what I have mentioned in CSS for all devices.
I have installed the .ttf file in my laptop
4 answers
solution1
2 2019-05-17 05:12:11
You need to include the font in the web page so that the clients have it available. You can't expect everyone to download and install the font themselves in order for your site to look right.
Add this to your head tag of your website.
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
For more information on how this works, read https://fonts.google.com/selection?selection.family=Lato
solution2
1 ACCPTED 2019-05-17 05:11:44
The issue here is that you have installed the font directly on your device so you are able to view it but since every device won't have the font installed you are seeing a fallback CSS font which is getting rendered automatically.
Lato is a open source font from Google Fonts and is directly hosted on the Google CDN. You can use the font directly from there to make sure it is rendered perfectly on any device.
Add the below line inside your <head> tag in your HTML file.
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
And you can add the font to your CSS like below -
font-family: 'Lato', sans-serif;
/*sans-serif is the fallback font family here*/
You can read more about the Google Fonts API over here .
solution3
1 2019-05-17 05:11:52
This is not how we use fonts in web projects.
First of all you need web font for lato. you can download it online or you can convert normal font (ttf) to web font from here .
Put these font files(woff) in your project folder.
Add css font face in you css then use the font family.
Or you can use Webfont Lato from google fonts.
add this in your Head
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
and in your CSS
font-family: 'Lato', sans-serif;
ask me anything else, or something is not clear.
solution4
0 2019-05-17 06:45:29
To embed these fonts into a webpage, copy this code into the of your HTML document.
STANDARD @IMPORT
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Specify in CSS - Use the following CSS properties to specify these families:
font-family: 'Lato', sans-serif;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.