I'm trying to load the Roboto google font in a PhalconPHP application. I've installed roboto-fontface using bower and I'm trying to load it's fonts locally using #font-face in my _fonts.scss file.
This is my font loading "code":
$roboto-font-path: '../../bower_components/roboto-fontface/fonts/roboto/';
#font-face {
font-family: "Roboto";
src: //local(Roboto Thin),
url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");
font-weight: 100;
}
The url that I'm using seemed to work, but when inspecting what actually happens in Firefox I get the following (which is the contents of my index.volt):
Screenshot of Firefox.
Of course I can load this font using <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> but that compromises loading time when using multiple fonts in the future.
Any help?
The .htacces in the root of each PhalconPHP application redirects all incoming requests to the public directory. My bower_components was outside of this directory. Moved bower_components inside of the public directory using a .bowerrc file and modified some paths. Works like a charm now ¯_(ツ)_/¯.
Related
So I'm facing an odd case. So i have uploaded Fonts in Public/fonts directory (
this is where i have uploaded
screenshot attached). Then when i use it in blade for example it does not show on live website. My website is on shared hosting.
#extends('layouts.app')
#section('title', 'Dashboard 1')
#section('contents')
{{--<dashboard></dashboard>--}}
Murshalin
<style type="text/css">
#font-face {
font-family: Lestudio;
src: url('{{ public_path('fonts/bpg-le-studio-02-webfont.tff') }}');
}
</style>
#endsection
Like here for example it does not affect anything I also have it in core.scss file imported but nothing changes. am I missing something?
It does not show in source too : Source image
Ok so in core.css file i imported web font using cdn
#import url("//cdn.web-fonts.ge/fonts/etc");
and just used font-family
This worked for me.
I'm trying to use #font-face to load two fonts, but am running into all kinds of strange issues. Some browsers will load the fonts, others won't. Same browser on desktop won't load but will on mobile. I don't know if there's something wrong with my code or my file structure or what (I used fontsquirrel's generator for the sdregular font, but not the other one).
My #font-face code is:
#font-face {
font-family: 'sdregular';
src: url('sd-regular-webfont.woff') format('woff');
}
#font-face {
font-family: 'BoereTudor';
src: url('BOERT___0.ttf') format('truetype');
}
My css styling code is:
.c9 {font-family: 'sdregular';}
.c7 {font-family: 'BoereTudor'; font-size: 1.5em;}
Here's the page link: https://universaltheosophy.com/hpb/voiceofthesilence.html
My stylesheets and fonts are located in the folder https://universaltheosophy.com/resources/
The css file utfonts.css calls the fonts using #font-face.
The css file utstyle.css contains the font-family setting for the two classes (.c7 and .c9)
.c7 is used for the text "Dedicated to the Few"; and .c9 is used for a symbol located here: https://universaltheosophy.com/hpb/voiceofthesilence.html#sdfootnote41sym
I've tried testing in Firefox (desktop and mobile), Chrome (desktop and mobile), and DuckDuckGo's Mobile Browser, with completely inconsistent results.
Any help would be much appreciated!
Ok, found the solution, which had nothing to do with my code. My site is a wordpress site, but I'm adding these few html files separate from wordpress. The attempt to load font files from these html files resulted in a "Access-Control-Allow-Origin (CORS origin)" error. The solution is adding this little snipped of code to the wordpress .htaccess file:
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Solution came from here: https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/
I implemented a webfont on our website. The website is available through two domains:
http://blog.von-der-see.de / http://www.vds-blog.de
The webfont is implemented this way:
#font-face {
font-family: Quattrocento-Sans;
src: url('./style/Quattrocento Sans.woff');
}
#font-face {
font-family: Quattrocento-Sans-Bold;
src: url('./style/Quattrocento Sans Bold.woff');
}
If you view the website in firefox through both domains, you will see that the font is not working on one of two domains.
The website is a wordpress and if i switch the home-url to the other domain, its not working on the on, but then on the other domain.
Whats the problem?
Have you tried adding font mime types in your htaccess?
Just out of interest why are you only using woff? No true type etc?
http://www.vds-blog.de/ doesn't load webfonts.
By changing style.css url in theme's header page
from
<link href="http://blog.von-der-see.de/wp-content/themes/vondersee/style.css" rel="stylesheet">
to
<link rel="stylesheet" href="http://www.vds-blog.de//wp-content/themes/vondersee/style.css">
may solve your problem.
I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.
This is how my directory looks like
-- Project
-- js
-- css
-- less
-- font-awesome
-- css
-- font
-- less
All I've modified in the Project > less > boostrap.less file has been:
#import "sprites.less";
//for this line
#import "../font-awesome/less/font-awesome.less";
As I said in Chrome works fine but for some reason Firefox shows only boxes.
Custom web fonts via CDN (or any cross-domain font request) doesn't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers.
You can fix this by adding headers to your page.
Apache
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Nginx
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
Credit: http://davidwalsh.name/cdn-fonts
If you want a quick and easy way to make Font-awesome work, try using CDNJS. It's free and powered by CloudFlare. CORS is supported out of the box.
Try something like this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
If you are hosting the font on S3, you have to enable CORS on the bucket. Through AWS Management Console, edit the properties for the bucket and under Permissions click on "Add CORS Configuration". In my case, if I left the default config, it still didn't work, so I changed it to:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
I was having issue with the if statement because I didn't have a $filename variable.
But I did have similar results using:
location ~ /\.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Using a CDN as premjg suggested is the least invasive method besides hosting it yourself. The latest version of fontawesome suggests bootstrapcdn, e.g.,
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
As a minor note, noscript silently blocks requests to the CDN unless whitelisted, and it won't prompt you to whitelist the CDN unless your page also requests JS files from the same domain.
If you're like me, modifying a web.config file is something you're not allowed to touch.
Try storing all the font files (.eot, .ttf, etc) into their own local folder, and link to them locally instead of the FontAwesome CDN. Cleared it up in IE and FF for me every time.
#font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
If you're using wordpress and you think you've tried everything, look and see if you ever installed a Font Awesome plugin. Disable the plugin and refresh in Firefox.
This was the solution for me - the plugin's older version of font-awesome was overriding the files I was trying to update myself manually.
In fonts folder please upload the following files
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Important glyphicons files----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Please upload the following files and after that you link your font-awesome.min.css in your header file.
Here is the following link with proper files:
http://goo.gl/WICQAf
I'm trying to create an offline HTML5 test application, and am playing with the new google fonts api at the same time. Does anyone have any ideas how to cache the remote fonts? Simply putting the api call in the cache manifest doesn't work, I assume this is because the api actually loads other files (ttf, eot, etc).
Any ideas if using the font api offline would be possible?
For reference this is the call I am making:
http://fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie
If you paste that URL into the browser address bar you'll see the files the CSS links to:
http://themes.googleusercontent.com/font?kit=txVk61PTIsDrQQj2fK-76Q
http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0
http://themes.googleusercontent.com/font?kit=xwIisCqGFi8pff-oa9uSVOj-KzHqS7w8OFmqoAXdQwE
Robertc's approach is the solution...
I.e., Paste the google-provided link into your browser, and then add any files that are referenced into your manifest.
In my case I referenced
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
which just consists of the following style definition
#font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
So to get the font to work when cached (off-line or not), you have to add the URL referenced in the 'src' to your manifest.