Το να προσθέσει κανείς fonts της επιλογής του/της σε μία WordPress ιστοσελίδα γίνεται με διάφορους τρόπους. Αναφορικά: Με τη χρήση του @font-face, του @import, μέσω HTML στο header.php, μέσω κάποιου plugin και, τέλος, μεσω του functions.php και των συναρτήσεων wp_enqueue_style και wp_enqueue_script. Ο τελευταίος τρόπος είναι ο κατά γενική ομολογία ο ακριβέστερος και αυτός που χρησιμοποιούμε και προτείνουμε.

Ποια η διαφορά μεταξύ των δύο όμως; Όπως ίσως υποψιάζεστε απο τα όνοματά τους, η μεν προσθέτει style sheets ενώ η δε scripts. Το ποια από τις δύο θα χρειαστεί να χρησιμοποιήσουμε εξαρτάται λοιπόν και από την πηγή από την οποία κάνουμε την εν λόγω προσθήκη. Για παράδειγμα, τα Google Fonts παρέχουν τα fonts σα style sheet. Σε αυτή την περίπτωση, θα προσθέσουμε το εκάστοτε font στη wordpress ιστοσελίδα μας με τον παρακάτω τρόπο, χρησιμοποιώντας τον σύνδεσμο που παρέχεται απο τη σελίδα των google fonts ανάλογα με την επιλογή μας (που μπορεί να είναι περισσότερες από μία, όπως ισχύει για το παράδειγμα).

function add_google_fonts() {
  wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto' );
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Βλέποντας τώρα διαφορετικές πηγές, όπως π.χ. την Adobe Edge Web Fonts, τα fonts μπορεί να παρέχονται ως JavaScript. Θα χρησιμοποιήσουμε την αντίστοιχη συνάρτηση λοιπόν, όπως παρακάτω:

function add_adobe_fonts() {
  wp_enqueue_script( 'adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js' );
}
add_action( 'wp_enqueue_scripts', 'add_adobe_fonts' );

Τέλος, αφού έχουμε προσθέσει το νέο font στην ιστοσελίδα μας, αρκεί να το χρησιμοποιήσουμε μέσω του style.css αρχείου. Σημειώνουμε ότι πρέπει να προσέξει κανείς πως συγκεκριμενοποιείται η δήλωση του font από την πηγή που το τροφοδοτεί. Το font Open Sans, για παράδειγμα, δηλώνεται στη css ως open-sans από την Adobe Edge Web Fonts και ‘Open Sans’ απο τα Google Fonts. Στο παράδειγμα παρακάτω αλλάζουμε το font για τις επικεφαλίδες:

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto';
}

Αν υπάρχουν περαιτέρω επιλογές που θέλουμε να χρησιμοποιήσουμε, όπως italics ή “βαρος” γραμματοσειράς, μπορούμε να χρησιμοποιήσουμε ιδιότητες όπως font-style, font-variant, font-weight, ενώ το font-family ορίζει την ίδια τη γραμματοσειρά όπως παραπάνω.

Πριν κλείσουμε το άρθρο, θα δώσουμε μία εναλλακτική χρήση των παραπάνω.

function colours_fonts_url() {
  $fonts_url = '';

  $query_args = array(
    'family' = urlencode( 'Roboto' ),
    'subset' = urlencode( 'latin,latin-ext' ),
  );

  $fonts_url = add_query_arg( $query_args, '//fonts.googleapis.com/css' );

  return esc_url_raw( $fonts_url );

}

wp_enqueue_style( 'google-fonts', colours_fonts_url(), array(), null );

Στην ουσία, αποτελεί την ίδια κλήση με την προηγούμενη wp_enqueue_style παραπάνω, απλά εδώ “κατασκευάζουμε” το σύνδεσμο που θα μας τροφοδοτήσει με το font. Μπορούμε έτσι, αν έχουμε μια παραπάνω εξοικείωση με τις επιλογές των fonts, να κάνουμε γρήγορα μικροαλλαγές χωρίς να ψάχνουμε το σύνδεσμο από την αρχή. Δυστυχώς, οι σύνδεσμοι που παράγονται απο τα Adobe Edge Web Fonts είναι κάπως πιο απρόβλεπτοι και δεν είναι αντίστοιχα εύχρηστη η ίδια τεχνική.

Αυτά!