Adding fonts for Joomla menu from google API - css

I use Joomla v3.9.8 stable on my website with a template named AS002066 and i want to use some additional fonts provided by the google API.
I found some code in a file from my template called 'fonts.php' and added there code as it is written for other fonts from google too.
I also added the needed code in 'mod_as_menu.xml' but nothing does work.
May i missed some thing?
This is what i added to my fonts.php. It's the same sheme like the entrys brought by the template:
case 'UnifrakturCook':
$font_arr['fontlink'] = "<link href='https://fonts.googleapis.com/css?family=UnifrakturCook&subset=latin,cyrillic,greek' rel='stylesheet' type='text/css'>";
$font_arr['fontfamily'] = "font-family: 'UnifrakturCook', Arial, serif !important;";
break;
And here what i added to my mod_as_menu.xml:
<option value="UnifrakturCook">Google:UnifrakturCook</option>
But it doesn't matter what i choose. It will not change any font.
I hope someone can help me with this.

Related

Using a Custom font on weebly blog

I'm trying to use a custom font on my blog which is I haven't make it work yet. Maybe you guys can help me out on this.
I just want my blog title to have its own font. here's the HTML structure
http://prntscr.com/curez2
First thing I did was I uploaded my ttf font in my asset folder
http://prntscr.com/cura4a
Next, import the font in CSS "main_style.css"
http://prntscr.com/curfro
here's the class on my blog-title
http://prntscr.com/curgr8
did I miss something? can someone help me out please. thanks!!
You need to include the full path to the .ttf file on http://prnt.sc/curfro
It looks like you have everything right, however not seeing a live example makes it a little hard to isolate. But there are a few things to consider. For example:
Did you try publishing the site?
Are you ONLY trying the Blog Title?
IF you have set your Font Settings for the Title and Blog Post
Title, to a specific font, it's going to override the Theme's design
and your custom Font. In that case edit the Font Settings and choose
"Default". Then try to see if it works(dont forget to publish). See: https://hc.weebly.com/hc/en-us/articles/201505666-Edit-Fonts
Is the 'Content Area' a div with an ID of content <div id="content"></div> (IF not that could be the issue.) Note: #content h2.blog-title could also be written as .blog-post .blog-header h2.blog-title
Have you tried a different font file(try a different font type/file)
With that, you should at least be able to isolate the issue, if not resolve it.

Is there a best practice for adding a Google Font to a Laravel Project?

I apologize that I'm not even sure where I would get started in terms of doing pre-research myself. I hope this isn't an opinion-based question, but a specific Laravel usage question. I'm curious if there is a specific way to go about including a Google font, or multiple Google fonts in a Laravel project. I could easily drop it in as if it were any other web page, but my instincts tell me that there's probably a more robust way of using the fonts than just placing the
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
include line in a main Blade layout template. Sure, I might even be able to shorten it with Blade with {{ HTML::style(...) }} or such, but that still doesn't seem to fully utilize the Laravel framework.
For example, let's say I want to change the specific font I'm using: If I'm using multiple templates, I would have to go in and change each of the include lines where that font is introduced. But ideally, I would want to have just one google-font variable where I could adjust it in just one place.
And if it wouldn't be too much to ask, would you also be able to explain any of the theory on where and how these font variable should/could be stored?
I'm not sure if I completely follow your question, but there are a number of approaches, but this sounds like more of a template inclusion/extension issues more than anything related to the fonts themselves.
You could include a snippet so you don't have change the font in multiple places:
In the places where you want to include the font in the head of a template:
#include('snippets.fonts')
In the snippets/fonts.blade.php:
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
You'll still need to handle the CSS though somewhere though. So you'll have to have something like:
h1 { font-family: Oxygen, Arial, sans-serif; }
All in all though, there are only 2 places you would have to update the font.
There is the simple way to do it..
{{ HTML::style('http://fonts.googleapis.com/css?family=Playfair+Display') }}

How to change 'inherited' font families using the CSS style sheet

I am not a programmer. The language is foreign. I am creating a WordPress website. I created a child-theme.
I read the theme documentation. Understood very little.
sent an email to the theme owner. No answer (2 weeks ago)
searched the web - found many websites - i.e. http://www.w3schools.com/ - http://css-tricks.com/sans-serif/ & others - me, no speak the language. Can you place html code in a CSS file?
The child-theme consists of a new style.css file. The top section of the style.css file is what was needed to create the child-theme. Then there are color changes which I inserted & that has gone very well.
Changing the font family is confusing. Poking around the parent theme and also using 'Firebug' the font(s) seem(s) to be ('inherited'?). .genericon, 'Roboto Condensed', Sans-serif, Arimo, Arial and a few other standard MS Word fonts. I saw on the Google font site a couple of fonts I would prefer to use for my website.
How do I (or even can I) download the Google fonts to the Style.css file?
What do I need to insert in the child style.css file to override the parent fonts?
In case this is important, the theme has more than one template (PHP?) option. I am using W7 OS.
The Google Fonts site is really direct and helpful.
In your example, you mention Roboto. Here's the page for that font.
You would check the varieties of Roboto that you want to be able to use on your site under Step 1.
Step 2 allows you to select additional character sets -- for example if you were likely to be displaying text in Russian.
Step 3 gives you three ways to "enable" the font on your site. You'll be placing a line of code somewhere, telling users' browsers to go and get the font from Google when called for. The easiest way to do this is probably the #import option. Copy and paste the code under that tab into your style.css at the top (that's important -- it should go before any of the stuff describing the layout or type on your stylesheet). Your sub-theme likely has a bunch of other #import lines up there already.
Step 4 shows what specifically you need to tell your stylesheet to look for.
Good luck!
External style sheets have the highest hierarchy, so just specify your styles with the id, class or element name.
Google is your friend here.
To use google fonts, go to the google font page and search for your font with the search box on the left, then click add to collection. Once in your collection, go to your collection and click "use".
You should get an "#import()" code, place this at the top of your external sheet.

How to close google-font reference in wordpress?

I'm a Chinese user, using WordPress(3.9.1) to built several websites.
But current days the website (both the frontend pages and the wordpress admin pages) goes extremely slow.
After checking the requests, I found the requests to the google-font link always fail. Maybe caused by the Chinese GFW.
The google-font API requests follows:
http://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9.1
But fails, the delay may cause the entire page cannot finish loading!
And this was automatically injected to both the admin html and client theme html. How to close that entirely? Or at least prevent the delay for such a long time.
My solution is simply install the plugin:
http://wordpress.org/plugins/disable-google-fonts/
Use this wordpress plugin: https://wordpress.org/plugins/remove-google-fonts-references/
This plugin disable all google font.
Look for this in your stylesheet:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
If you find that, you can delete it. But you will want to replace font-family:'Open Sans' with the simpler font-family:sans-serif elsewhere in your stylesheet.
If you do not find the #import line, someone may have buried this one in your theme's header:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
If so, same drill -- you may remove it, but you'll want to also remove references to 'Open Sans' in your stylesheet.

Why are my Google fonts not working?

It looks like my Google fonts are not working properly. My wordpress theme comes with a customized Googlefonts.php that uses this code to request the fonts:
foreach($googlefonts as $getfonts) {
if(!in_array($getfonts, $default)) {
$customfont = str_replace(' ', '+', $getfonts). ':400,400italic,700,700italic|' . $customfont;
}
}
if($customfont != ''){
echo "<link href='http://fonts.googleapis.com/css?family=" . substr_replace($customfont ,"",-1) . "&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese' rel='stylesheet' type='text/css'>";
}
I do not understand how the Google fonts api works, I never used it in this way.
According to Firebug my call to the api returns a bad request. This is the URL that the above piece of code sends to Google right now:
http://fonts.googleapis.com/css?family=Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic|Trebuchet+MS:400,400italic,700,700italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese
Can someone explain to me why this is not working?
PS: Someone may think why are you requesting the same font so many times. This is because my theme has options to get different fonts for H1, H2, normal text, the menu, etc.
The URL itself explains why it's not working - Google do not have a Trebuchet MS font.

Resources