6

I tried to copy the steps here and here, not sure what I am doing wrong. It doesn't seem to be making the call to google or using my css file. It just displays the default h2.

Here is my drupal8_zymphonies_theme.info.yml with the /fonts library

#Libraries
libraries:
  - drupal8_zymphonies_theme/bootstrap
  - drupal8_zymphonies_theme/global-components
  - drupal8_zymphonies_theme/fonts

Here is the drupal8_zymphonies_theme.libraries.yml:

fonts:
  css:
    theme:
      //fonts.googleapis.com/css?family=Oxygen:300: { type: external }
      css/sm.css: {}

According to this, I should see the link to the external google url, but I don't.

And the entire css file:

/*font*/
.welcome-banner-text h2{
    font-family: 'Oxygen', sans-serif;
    font-style: normal;
    font-size: 45px;
    color: #fff;
}      
  • Did you clear the cache, is drupal8_zymphonies_theme enabled? Btw protocol-relative URL's to google fonts is pointless, it's always https. – Jeff Burnz Sep 20 '16 at 9:53
  • yeah, I have all the new debug stuff on in my local, and browser caching off, and theme is enabled. Driving me nutz. – スコット Sep 20 '16 at 12:18
7

This works for me:

fonts:
  css:
    theme:
      '//fonts.googleapis.com/css?family=Titillium+Web': { type: external, minified: true }
1

Add this to your YOURTHEMENAME.libraries.yml:

librefranklin:

  css:

    base:

      '//fonts.googleapis.com/css?family=Libre+Franklin:400,400i,700': { external: true }

opensans:

  css:

    base:

      '//fonts.googleapis.com/css?family=Open+Sans:400,400i,700': { external: true }

And add this to your YOURTHEMENAME.info.yml file:

libraries:
  - YOURTHEMENAME/librefranklin
  - YOURTHEMENAME/opensans
0

Not sure what the story was, this works:

fonts:
  css:
    theme:
      'https://fonts.googleapis.com/css?family=Raleway:900': { type: external }

With no additional css file, I just added to the styles.css.

  • In your example code above, the URL isn't quoted whereas here it is. Could you try both and verify that was why it happened? – Kevin Sep 20 '16 at 13:29
  • The quotes were a last ditch effort, most examples I saw were not quoted, so I am not sure it matters, in fact, before I committed it, I took the quotes off and it still works. I know I was doing something wrong, and it could have been something drupal-ly with the order of files or code. I'm stumped. – スコット Sep 20 '16 at 22:55
  • Yeah, it shouldn't matter with quotes, I do mine programmatically (in hook_library_info_build) and they're certainly not quoted. – Jeff Burnz Sep 21 '16 at 0:05
  • I guess quotes do matter if you have a colon in your URL, as {type: external} is separated by a colon too – Hudri Jun 13 '17 at 9:01
-4

use https://www.drupal.org/project/fontyourface module. This is very handy to use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.