So i'm using the Roboto font using this
and obviously font-family: Roboto in my css.
The problem is that only chrome displays the Roboto font. What should I do?
here's my website so you can see: click
I try it On Firefox 56 and the font in loaded
try to load font before another css file may be the problem solved
Like This
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
Related
I am running in a problem here. There are some bootstrap font awesome icons which are not working with the downloaded CSS but working with the same external CDN. Many are working but some are not working like fa-copyright, fa-credit-card-alt etc. For example:
Its working with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
But not working when replace with
<link rel="stylesheet" href="css/font-awesome.min.css">
even though I copy the content of external CSS and replace with the contents of font-awesome.min.css in my css/ directory. Please help me.
try this:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
or
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
or
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts.
It not work, that just the css. You need the font files of font-awesome too, and put them in a folder called fonts. The font files are:
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
And you need the lastest versione too (4.7 i think) or you can't use some of the icons. Just go to their website and download it.
I came across the same problem. The version of FontAwesome I was using was outdated. I updated to use 4.7 and everything worked smoothly.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
I'm trying to create a responsive email template for Outlook 2013, everything works well except the fonts. I'm using fonts from Google fonts, and I'm loading them like this:
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
I'm not sure if it fails since Outlook 2013 can't load media queries on my internal CSS level, or if its unable to load fonts from Google Fonts.
Any thoughts?
Outlook doesn't support web fonts. So you need a fallback font for Outlook like an Arial or Times New Romans things.
<!--[if mso]>
<style type="text/css">
body, table, th, td {font-family: Arial !important;}
</style>
<![endif]-->
one of my client website uses font called Roboto. When I look on their pages all looks fine and font is working properly on all of them.
However they say that their products pages http://lichtblick-led.de/index.php/produkte.html showing other font instead of Roboto. Again, they say its only on that page and not on other pages.
Can any of you replicate the same problem?
P.S. They said they tested it from all browsers, few different computers, and even cleared the cache.
Cheers!
after an inspection of the page I noticed that it's not using the Roboto font
<link href="//fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
that is font Lora.
this needs to be changed
under HTML:
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
OR
under CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
You can further modify your selection over here on GoogleFonts
PS: I have included the latin & cyrillic subsets.
The link to load the Roboto font from the Goolge CDN isn't present on the products page:
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,300italic&subset=latin-ext" rel="stylesheet" type="text/css">
Also you should load the fonts before the JavaScript to prevent FOUC.
I had a problem with displaying my favicon in Chrome. It works fine in FireFox, but I can't get it to display in Chrome. Also, something else I would like to ask is if you have to actually have a website on the web to display favicons because I took the link to the favicon from this website and tried it on my html code and it worked just fine. Something else to note is that the file is up a directory, so I don't want people to correct me on the ../ that appears in the code. Like I said, it works in FireFox. Thanks in advance.
Here is the code:
<!Doctype html>
<html>
<head>
<link rel="shortcut icon" href="../GRAFX/ICO/fav.ico">
</head>
<body>
</body>
</html>
No, you don't have to have the website on the web to view favicons in Chrome. It happens because Chrome old versions do not support favicon hosted on your computer. The favicon has to be hosted on an internet server. Use a photo hosting website. I recommend ImageShack.
After, just do this:
<link rel="shortcut icon" href="http://www.urloftheimage.com/image.png" type="image/x-icon">
Major browsers support PNG, JPG and GIF as extensions of the favicon. It doesn't has to be .ico, but it's good to use it.
Just add the following lines to your head tag. That will supports the major browsers.
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico">
PS: don't forget to delete the browsers cache before you try the code!
I'm using this to link to some Google Fonts:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
I'm using this code, which works in some browsers:
<span style="font-size: 110px;font-family:montez;"><b>Abcdefg</b></span>
Why doesn't the font doesn't appear in IE8? http://jsfiddle.net/3NbE5/
It seems that IE doesn't support multiple fonts in the href:
http://jsfiddle.net/3NbE5/3/
You had this href:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
After removing the other fonts it worked:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Montez' rel='stylesheet' type='text/css'>
Just in case the solution above don't cut it for you.
I got multiple fonts working on ie8 without any problems. My actual problem was using ie11 in compatibility mode for ie8, where google web fonts don't seem to work in any possible way.
I guess the lesson is, use a vm with the actual ie8. You can grab one here or here.