Custom css font isn't loading - css

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?

Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs

Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).

Related

Can't import fontawesome-webfont typography

I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}

how to use css variables in #font-face url

:root {
--icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}
#font-face {
font-family: 'iconfont';
src: url(var(--icon-url)'.eot');
src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}
Module not found: Error: Can't resolve './var(--icon-url' in 'Users/xxx/xxx'
if you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
CSS variable not supported in src or src's url.
Found this considerably after the fact, but you tagged this as sass in addition to css. In SASS, you CAN include this as a variable. You have to pass the variable with special syntax, though.
Instead of just $url you have to pass it like so: #{$url}. Then SASS will know to include the string directly.
Example:
/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
#font-face {
font-family: 'iconfont';
src: url('#{$icon-url}.eot');
src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-url}.woff') format('woff'),
url(var(--icon-url)'.ttf') format('truetype'),
url('#{$icon-url}.svg#iconfont') format('svg');
}
Mind you, at this point, you could just use woff2 and woff, so this may be less needed.
See https://caniuse.com/mdn-css_at-rules_font-face_woff
:root {
--icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}

CSS not recognizing one my linked fonts

In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}

#font-face rule in CSS files in Synmfony 2 with Assetic

I'm looking for including fonts from CSS files in Symfony using Assetic. The issue is the browser fails to load these fonts.
#font-face {
font-family: 'Corbert'; /*a name to be used later*/
src: url('fonts/Corbert-Regular.otf') format('opentype'),
url('fonts/Corbert-Regular.woff') format('woff'),
url('fonts/Corbert-Regular.ttf') format('truetype');
}
My path structure is
...
+-src/
| +-MyCompany/
| +-MyBundle/
| +-Resources/
| +-public/
| +-css/
| +-fonts/
My path linking the CSS files is
What am i doing wrong ?
I found the solution :
Just put in your Document.html.twig where you link your css files:
<style type="text/css">
#font-face {
font-family: 'Corbert';
src: url({{asset('fonts/Corbert-Regular.otf')}}) format('opentype'),
url({{asset('fonts/Corbert-Regular.woff')}}) format('woff'),
url({{asset('fonts/Corbert-Regular.otf')}}) format('truetype');
}
</style>
Indeed if you put that in the css file, symfony doesn't seem to recognize the code. It's the same for the picture :
<style type="text/css">
body, html{
background-image:url({{ asset('images/wallpaper.png') }});
}
<style>
Nice Week-end !

#font-face stopped working on certain fonts

I used #font-face on my website for 2 fonts.
One of them stopped working - I checked everything, tried different syntax but nothing brings it back.
Here is my CSS:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot');
src:url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'), url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'), url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'), url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
The "Yank" font still works perfectly. using chrome for QA.
website: www.odednaaman.com
any ideas?
Thanks,
Oded
The src should be only once but you're having two times in your first #font-face. So, use this:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot'),
url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'),
url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'),
url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'),
url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
From the console of Chrome:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.odednaaman.com/fonts/ygothambook.woff
So it seems that you need to upload the .woff file.

Resources