I have a directory called project and in it i have the directories html,assets and javascript.The assets directory has the directories fonts and css.The css directory has a css file called typography.css.The fonts directory has all the fonts i am using.
Inside the html directory i have a file typography.html. To use the fonts i am using this code inside typography.css which is correctly linked/referenced in my html file.However this code inside typography.css
#font-face {
font-family: "LatoLight";
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg");
}
h1{ font-family: LatoLight !important; }
does not produce the desired result.I am using twitter bootstrap 3.Why is this not working?.
Try:
#font-face {
font-family: 'LatoLight';
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"),
url('../fonts/lato-light-webfont.woff') format("woff"),
url('../fonts/lato-light-webfont.ttf') format("truetype"),
url('../fonts/lato-light-webfont.svg') format("svg");
font-weight: normal;
font-style: normal;
}
I've switched double quotes to single. It MIGHT make a difference but i am not sure.
otherwise this might help Bootstrap 3 unable to display glyphicon properly i know it's glyphicons but firefox might just be having issues regarding other fonts.
I think it could be as simple as putting quotes around the font you want when you reference it.
h1{ font-family: "LatoLight" !important; }
Related
It's reasonably common for sites I'm building to use the semibold weight of a given font for their "bold" variant. Usually, this is very easy to set up by using a custom #font-face declaration that points at the semibold files and has font-weight: 700;.
That's fine when the fonts are available under a free licence, and can be hosted directly alongside the website. Sometimes, however, the fonts I need to use are only available under a paid licence. My employer pays for a subscription to Adobe Fonts to give us access to these fonts.
However, Adobe Fonts sets up its own #font-face declarations in the CSS files it provides for a given web project, and for semibold weights it uses the standard font-weight: 600;.
Unfortunately I've found very little information online about using #font-face with Adobe Fonts (or Typekit, which it used to be called). The closest thing I found on Adobe's own website (https://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html) doesn't say anything about using #font-face with Adobe Fonts/Typekit.
I don't trust the file URLs Adobe Fonts uses in its CSS to remain static, so I don't think I can reuse them in my own CSS without risking breaking the fonts once those URLs are no longer correct.
Is there any way in CSS I can do something like create a new #font-face declaration based on a previous one created in an imported CSS file, or modify a #font-face declaration that was included this way? I'd much rather just set up the font to use its semibold files when the browser thinks it should be bold, instead of telling the browser to use the semibold font-weight where it would would normally use bold.
For anyone else running into this issue, the solution I've gone with for now is to create my own #font-face declaration using the URLs from Adobe Fonts' CSS file, but with a different name for the font family.
I'm using the Adobe Fonts font family as a fallback for if the one I've created doesn't load, so if the URLs break it should at least fall back to the one Adobe Fonts has set up with the font weights that don't match what I need.
/* Here Adobe Fonts uses #font-face to create the font family "adobe-font" */
#import "https://use.typekit.net/<my-project-key>.css";
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/regular.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/regular.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/regular.ott") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/italic.ott") format("opentype");
font-weight: 400;
font-style: italic;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold.ott") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold-italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.ott") format("opentype");
font-weight: 700;
font-style: italic;
font-display: auto;
}
.my-class {
font-family: "Custom Font", "adobe-font", sans-serif;
}
It's not perfect, but since I haven't been able to find any assurance from Adobe that their font file URLs will never change this at least gives me some security if they do change.
I am using #font-face to try and get the font 'Archisto' to load on my webpage. I am a newbie on building web pages and using #font-face. I followed all the steps on several tutorials and looked through several threads on here, but I can not get the font to load.
I have the css file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css
I have the font file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF
The #font-face code in the .css file looks like this:
#font-face {
font-family: Archistico;
src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);
}
I am calling the font with custom CSS that looks like this:
.page-content h5{
font-family: 'Archistico' !important;
font-size: 50px !important;
display: inline !important;
color: #231400 !important;
}
The page I am trying to get this to work on is: www.unfoldmyworld.com
I would really appreciate your help!
1- Add to the head section of web page.<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>
-2 Using #import CSS directive, put the following line in add to your css file.(http | https)
#import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);
-3 Use font-face declaration Fonts.(http | https)
#font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }
Let me know if this works for you :) Thanks
Have you tried it with a relative url?
I'm thinking of a CORS (Cross-Origin Resource Sharing) problem.
#font-face {
font-family: Archistico;
src: url('../fonts/FONT_11.TTF');
}
I'm using a css compiler (Stylus) for the first time, and I can't get Google Web Font urls to load correctly.
This:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Roboto:300,500,700&subset=latin,latin-ext);
}
produces:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url("data:application/octet-stream;base64,QGZvbnQtZmFjZSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXdlaWdodDogMzAwOwogIHNyYzogbG9jYWwoJ1JvYm90byBMaWdodCcpLCBsb2NhbCgnUm9ib3RvLUxpZ2h0JyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9QcnUzM3FqU2hwWlNtRzN6NlZZd25hQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gTWVkaXVtJyksIGxvY2FsKCdSb2JvdG8tTWVkaXVtJyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9vT2VGd1pObHJUZWZ6TFltbFZWMVVLQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gQm9sZCcpLCBsb2NhbCgnUm9ib3RvLUJvbGQnKSwgdXJsKGh0dHBzOi8vZm9udHMuZ3N0YXRpYy5jb20vcy9yb2JvdG8vdjE1Lzk3dWFoeGlxWlJvbmNCYUNFSTNhVzZDV2N5bmZfY0R4WHdDTHhpaXhHMWMudHRmKSBmb3JtYXQoJ3RydWV0eXBlJyk7Cn0K");
}
I've tried to troubleshoot, loading a character at a time, and can get part of the url to compile correctly, so this:
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Robot);
produces:
src: local('Roboto Light'), local('Roboto-Light') url("https://fonts.googleapis.com/css?family=Robot");
But as soon as I add the last 'o' to 'Roboto' it compiles as that crazy "data:application/octet-stream;base64,QGZv..." output.
I have tried other urls and get a similar result. Have also tried escaping the "=" sign. It escapes, but I still can't get it to compile correctly past 'Robot'.
For now, I'm hard coding the css file with the correct urls. Not a huge problem, but I'd like to figure out what I'm doing wrong.
I'm 100% sure that it's not Stylus produces this behavior. You can verify it at http://tinyurl.com/hqthyml (view compiled CSS). Probably it's some plugin or maybe build tool (gulp/webpack/...) that you're using with Stylus.
the font you are using from google fonmt its simple just
put this into you css file on the top
#import url(https://fonts.googleapis.com/css? family=Roboto:400,300italic,300,400italic);
and use simple like
body{
font-family: 'Roboto', sans-serif;
}
you are trying to call a html request into the css file which i understand thats why it compile this
I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the #font-face. Here is my code:
#font-face { font-family: Skia;
src:url('./webfonts/skia.ttf') format('truetype'),
url('./webfonts/skia.eot') format('embedded-opentype'),
url('./webfonts/skia.woff') format('woff'),
url('./webfonts/skia.svg');
font-weight: lighter;
font-style: normal;
}
the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.
>styles
>'style.css'
>webfonts
>'skia.ttf / woff / eot / svg'
In the <body> tag, I'm including font-family:Skia, sans-serif;
It looks like you're on the right track
#font-face {
font-family: "sansation";
src: url("fonts/sansation_light.eot");
src: url("fonts/sansation_light.eot?#iefix") format("eot"),
url("fonts/sansation_light.ttf") format("truetype"),
url("fonts/sansation_light.woff") format("woff"),
url("fonts/sansation_light.svg") format("svg");
font-weight: 200;
font-style: normal;
}
You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!
Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.
I can't seem to get #font-face to pull down these embedded fonts.
Page is here: http://clubs.speareducation.com/resources/
The header "Download Digital Resources" is suppose to be gotham_htfregular.
Take a look at my global.css stylesheet (fonts are at the top). Have tried double quotes, single quotes... I have never had trouble with this before... Am I missing something here?
Here is my CSS.
#font-face {
font-family: "gotham_htfregular";
src: url("gothahtfregular-webfont-webfont.eot");
src: url("gothahtfregular-webfont-webfont.eot?#iefix") format("embedded-opentype"),
url("gothahtfregular-webfont-webfont.woff") format("woff"),
url("gothahtfregular-webfont-webfont.ttf") format("truetype"),
url("gothahtfregular-webfont-webfont.svg#gotham_htfregular") format("svg");
font-weight: normal;
font-style: normal;
}
Thanks!
The URLs of the font files are not properly set. Check them out.
I see gothahtfbol-webfont-webfont, gothahtfboo-webfont-webfont, and gothahtfmed-webfont-webfont, all loaded as 'gotham_htfregular'; so tell me, which of these files you're importing contains 'gotham_htfregular'? looks like there's bold, medium, and something else, but none of them look like they're regular.