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.
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'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 ¯_(ツ)_/¯.
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.
any ideas? here's what I'm using:
#font-face {
font-family: 'Jott';
src: url(http://stuff.saikonet.org/fonts/jott/JottFLF-Bold.ttf) format('truetype');
}
Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers. See: http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox
Can that be your problem:
In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
https://developer.mozilla.org/en/css/#font-face
When I downloaded the TTF it was working in Firefox as well.